圭 握 主 六 前 后 端 找 术 ， 淋 构 和 开发 一 个 完 敖 系统 案例 


0 tn 带领 读者 从 零 开 始 ， 一 步 地 开 
发 | 界面 优雅 、 架 构 优 恨 、 代 码 注释 完善 、 基 础 功 和 Se 
系统 。 污 者 可 以 以 此 为 范例 从 中 学 习 和 汲取 技术 知识 也 可 以 基于 此 系统 开发 和 实现 
具体 的 生产 项 目 。 
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月 1 


纵 观 当今 Web 开 友 领域 ， 优 秀 的 后 妆 开 上 有 友 语 言 虽 有 不 少 ， 但 是 Java 依然 独 口 歼 关 ， 连续 多 年 
占据 了 行业 的 半壁 江山 ， 特 别 是 随 着 Spring Boot 和 Spring Cloud 的 诞生 和 流行 ， 集 智慧 于 
Spring 拉 术 体系 成 为 行业 开发 的 站 选 之 一 。 在 前 端 领 域 ， 也 是 各 种 框 染 齐 出 ， 技术 更 新 日 新 月 异 ， 
在 众多 的 技术 和 框架 中 ，Vue.js、React 和 Angular.js 算是 当前 核心 框架 中 的 佼 侈 者 ， 各 目 占 有 不 少 
市 场 份额 。 市 场 代 表 责 求 ， 技 术 代 表 能 力 。 显 而 易 抑 ， 在 当今 开 友 领 域 中 ， 谁 能 更 好 地 和 营 握 这 些 
主流 开 友 技术 ， 谁 融 能 在 跟 别 人 竞争 的 时 候 多 一 些 等 公 ， 谁 加 能 获得 更 好 的 束 业 机 会 、 新 资 报酬 和 
发 展 空间 。 

如 何 能 更 好 地 和 车 握 行业 技术 呢 ? 抱 看 技术 书籍 埋头 吉 读 ? 当然 不 能 死记 便 到 ,我们 这 样 的 开 友 
人 员 ， 除 了 要 区 握 基础 理论 ， 最 重要 的 还 是 要 多 实践 ， 实 践 出 呐 知 呆 ， 大 家 者 知 息 。 要 想 更 好 地 等 
握 开 发 技术 和 知识 ， 束 要 进入 项 目 多 与 人 代码， 当然， 对 于 大 多 数 人 来 说 ， 最 好 的 成 长 方式 ， 束 是 能 
够 进入 优秀 的 项 目 ， 跟 着 优秀 的 前 幸 ， 产 出 优秀 的 代码 。 然 而 现实 是 ， 很 多 人 并 不 能 够 进入 优秀 的 
项 目 ， 也 无 法 跟 独 优秀 的 前 奉 学 习 优 秀 的 代 但 。 他 们 舌 于 想 要 入 门 而 又 找 不 到 门道 ， 想 要 成 长 而 义 
找 不 到 方 同 ， 往 往 一 不 小 心 融 在 学 习 的 路 上 混沌 迷 范 ， 不 知 所 措 ， 送 而 玫 失 了 信心 ， 是 生 了 导 意 。 


大 于 本 书 


本 书 为 三 大 开 友 者 量 喘 打造 ， 从 项 目 实践 出 有 友 ， 选 用 当前 各 种 主流 的 技术 ， 手把手、 心 贴 心地 
市 着 读者 从 雯 开始 , 一 步 一 步 地 实现 一 个 完整 的 后 台 权 限 管理 系统 。 通 过 整个 管理 系统 的 开 友 和 实 
践 ,让 读者 在 学 成 之 后 能 够 熟 信 和 掌握 当前 的 一 些 主流 拉 术 和 方 同 , 且 在 后 续 的 工作 中 拥有 目 主 搭 
建 开 友 环 境 和 完成 整个 系统 开 友 的 能 力 。 后 从 权限 管理 系统 是 各 种 业务 系统 的 基础 配备 模块 之 一 ， 
且 整 个 大 业务 系统 中 的 其 他 系统 大 多 都 要 依赖 权限 系统 模块 ,所 以 权限 管理 系统 在 整个 业务 系统 中 
的 重要 性 束 不 言 而 哈 了 。 

本 书 的 示例 系统 称 为 Mango 权限 管理 系统 ， 诞 生 于 本 教材 实践 项 目 。Mango 采用 前 后 端 分 离 
染 构 ， 前 新 采用 Vue.js 作为 核心 框架 ， 并 使 用 同样 非常 流行 的 Element 作为 UI 框 染 。 前 疾 开 有 友基 
于 NPM 环境 , 使 用 Visual Studio Code 作为 IDE 编写 代码 。 前 端 使 用 Mock 可 以 模拟 后 台 接 口 数 据 ， 
可 以 在 没有 后 人 台 的 情况 下 使 用 大 部 分 功能 , 所 以 也 适合 不 会 部 普 后 疹 的 开 友 人 员 和 学 习 和 使 用 。 后 问 
则 采用 Spring Boot + Spring Security + Spring Cloud + MyBatis 的 主体 架构 ， 基 于 Java 环境 采用 
Eclipse 开 友 ， 使 用 Maven 工具 构建 ， 文 持 使 用 Swagger 进行 后 台 接 口 测 试 。 总 而 言 之 ，Mango 是 
一 个 基于 Spring Boot、Spring Cloud、Vue.js 、Element UI 实现 ， 采 用 前 后 痛 分 离 架 构 的 权限 管理 
系统 ， 也 是 一 球 采 用 当前 主流 技术 实现 的 界面 优雅 、 染 构 优 民 、 代 人 码 人 简洁 、 注 释 完 善 、 基 础 功能 相 
对 完整 的 Java 快速 开发 平台 。 读 者 可 以 以 此 为 范例 从 中 学 习 和 汲取 技术 知识 ， 也 可 以 基于 此 系统 
开发 和 实现 具体 生产 项 目 。 

本 人 知识 有 限 ， 经 验 尚 浅 ， 书 中 大 有 诬 处 ， 烦 请 指正 ,不 胜 感激 。 回 首 当 年 , 我 也 曾 为 如 何 入 
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门 而 困扰 ， 也 因 难 以 进步 而 迷 荡 ， 聊 者 此 书 ， 只 为 可 以 帮助 更 多 的 人 在 学 习 和 开 友 中 寻 得 门道 、 取 
得 进步 和 成 长 ， 果 有 人 能 因此 书 而 获 益 ， 那 就 是 功德 无 量 了 。 本 书 适用 于 业界 前 后 端 开 友人 员 和 全 
栈 工程 师 以 及 广大 想 要 学 习 和 笛 握 前 后 病 拉 术 的 人 员 ， 特 别 适 合 那 些 想 要 快速 提升 项 目 实践 经 验 ， 
熟 炙 和 掌握 染 构 开 友 贞 个 业务 系统 能 力 的 三 大 开发 者 。 读 者 在 学 习 和 开发 的 过 程 中 夺 有 什么 疑问 ， 
欢迎 通过 电子 邮件 提问 或 群 聊 咨询 。 
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本 篇 内 容 主 要 包括 系统 修 绍 、 安 半 指 南 和 关键 技术 ,3 个 草 琅 内容. 


第 1 草 权限 官 理 系 统 介绍 ,从 系统 功能 、 系 统 采 构 和 系统 界面 3 个 方面 出 发 , 分 别 进行 
解读 和 描述 ， 让 读音 往 开 怒 学 习 和 开 必 前 , 能够 对 本 书 内 容 和 项 目 有 一 个 大 致 的 印 银 。 

第 2 章 安装 指南 ,分 为 前 后 端 安 装 指 南 两 个 部 分 , 通过 元 整 详细 的 项 目 安装 运行 步骤 ， 
帮助 读者 快速 在 本 地 搭建 起 开发 环境 ; 快速 进入 源码 学 习 和 项 目 实践 。 

第 3 和 草 关键 技术 ,为 读者 介绍 Mango 权限 管理 系统 开 必 中 所 小 及 的 主要 技术 让 读音 
对 涉及 的 相关 技术 有 一 个 初步 的 认识 \, 并 引导 读音 进行 更 为 深入 的 学 习 。 


第 ] 草 


IX 距 时 挂 系 统 1126 


本 章 分 为 权限 管理 系统 介绍 、 系 统 架 构 和 系统 界面 3 节 , 针对 基于 本 书 实 现 的 Mango (本 
书 示例 项 目 名 ) 权限 管理 系统 , 分 别 从 系统 功能 、 系 统 架 构 和 系统 界面 3 个 方面 进行 相对 整体 
的 介绍 ， 让 读者 对 Mango 系统 以 及 本 书 涉及 的 相关 技术 有 一 个 大 致 的 印象 和 了 解 ， 以 便 在 后 
续 的 阅读 中 可 以 结合 相 天 知识 和 项 目 实践 逐步 深入 学 习 和 开发 。 系 统 人 简介 罗列 主要 的 系统 功 
能 ， 系统 架构 分 别 对 前 后 端的 架构 绘图 进行 描述 , 系统 界面 通过 系统 功能 界面 截图 并 配合 简要 
描述 的 方式 帮助 读者 更 好 地 了 解 系统 拥有 的 功能 和 模块 。 


系统 简介 


Mango 后 台 权 限 管 理 系统 是 基于 Spring Boot、Spring Cloud、Vue.js 、Element UI 等 主流 
前 后 闯 技 术 , 采用 前 后 端 分 离 染 构 实现 的 权限 官 理 系 统 , 也 是 一 球 采 用 当前 主流 拉 术 实现 的 界 
面 优雅 、 染 构 优 民 、 代 人 码 伽 洁 、 注 释 完 普 、 基 础 功能 相对 完整 的 Java EE 快速 开发 平台 ， 前 后 
疹 开 友人 员 都 可 以 以 此 为 范例 从 中 和 芝 习 和 汲取 技术 知识 ,也 可 以 基于 此 系统 开 友 和 实现 具体 生 
产 项 目 。 

Mango 实现 的 主要 功能 包括 : 


e@ 系统 登录 : 系统 用 户 登 录 ， 系 统 登 录 认 证 (token 方式 ) 。 
e@ 用 户 管理 : 新 建 用 户 ， 修 改 用 户 ， 删 除 用 户 ， 查 询 用 户 。 
e 机 构 管 理 : 新 建 机 构 ， 修 改 机 构 ， 删 除 机 构 ， 查 询 机 构 。 
e。 角色 管理 : 新 建 角 和 色 ， 修 改 角色 ， 删 除 角 色 ， 查 询 角色 。 
e@ 菜单 管理 : 新 建 菜单 ， 修 改 菜单 ， 删 除 菜单 ， 查 询 菜单 。 
@ 字典 管理 : 新 建 字典 ， 修 改 字典 ， 删 除 字典 ， 查 询 字典 。 
e 配置 管理 : 新 建 配置 ， 修 改 配置 ， 删 除 配置 ， 查 询 配置 。 
e@ 登录 日 志 : 记录 用 户 的 登录 日 志 ， 查 看 系统 登录 日 志 记 录 。 
e 操作 日 志 : 记录 用 户 的 操作 日 忘 ， 查 看 系统 操作 日 志 记 录 。 
e 在 线 用 户 : 根据 用 户 的 登录 状态 ， 查 看 统计 当前 在 线 用 户 。 
e@ 聚合 文档 : 定制 Swagger 文档 ， 提 供 简洁 美观 的 API 文档 。 
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e 备份 还 原 : 系统 数据 备份 还 原 ， 一 键 恢 复 系统 初始 化 数据 。 

e 主题 切换 : 支持 主题 切换 ， 自 定 主题 颜色 ， 实 现 一 键 换 肤 。 

e@ 服务 治理 : 集成 Consul 注册 中 心 ， 实 现 服务 的 注册 和 发 现 。 
e 服务 监控 : 集成 Spring Boot Admin， 实 现 全 方位 的 服务 监控 。 
e 服务 消费 : 集成 Ribbon、Feign， 实 现 服 务 调 用 和 负载 均衡 。 
e 服务 熔断 : 集成 Hystrix、Turbine， 实 现 服务 的 熔断 和 监控 。 

e 服务 网 关 : 集成 Spring Cloud Zuul， 实 现 统一 API 服务 网 关 。 
e 链 路 追踪 : 集成 Sleuth、ZipKin， 实 现 服务 分 布 式 链 路 追踪 。 
e 配置 中 心 : 集成 Cloud Config 和 Bus， 实 现 分 布 式 配置 中 心 。 


这 里 简单 地 罗列 了 相关 的 系统 功能 ， 后 续篇 幅 会 给 出 促 功 能 的 系统 界面 说 明 。 


1 ,2 系统 架构 


本 系统 采用 前 后 端 分 离 架 构 实现 ， 前 后 端 通过 JSON 格式 进行 交互 ， 前 后 端 此 可 分 开 独 立 
部 署 。 前 端 支持 开启 Mock 模拟 接口 数据 ， 可 以 避免 对 后 台 接口 开发 进度 的 依赖 ,后台 支持 使 
用 Swagger 进行 接口 测试 ， 同 样 可 以 避免 对 前 端 页 面 开发 进度 的 依赖 。 
1.2.1 前 跨 溢 构 

前 端 架 构 比较 简单 ， 核 心 框架 使 用 当前 主流 的 Vuejs，UI 使 用 饿 了 么 开源 的 Element， 前 


后 端 区 互 使 用 了 axios， 使 用 Mock 模拟 接口 数据 。 
前 端 架 构 如 图 1-1 所 示 。 


和 


VUue.]s 
图 1-1 


1.2.2 后 并 架构 


后 病 架 构 使 用 Spring Boot + Spring Security + Spring Cloud + MyBatis 的 主体 架构 ， 除 此 之 
外 ， 选 择 Consul 注册 中 心 ， 使 用 Maven 构建 工具 、MySQL 数据 库 等 。 
后 端 架 构 如 图 1-2 所 示 。 
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Web Proxy | DIS 


Monitor 


Turbine 
app 


1 系统 界面 


1.3.1 登录 页 面 


系统 登录 界面 如 图 1-3 所 示 ， 因 为 验证 码 症 通过 后 台 生 成 的 , 所 以 野 示 验证 但 南 要 后 人 台 的 
文 持 。 


1.3.2 ”系统 主页 
系统 主页 主要 是 系统 介绍 内 容 ， 如 图 1-4 所 示 。 
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项 目 介绍 


其 于 Spnmng Boont， 号 pmnng loud、wue。、EIEment 的 ,java FE 局 违 开 点 平台 


局 在 担 攻 一 剖 简 洁 哆 用 的 角 法 方案 , 帮助 用 户 有 效 隆 性 项 目 开 点 难 左 和 成 本 


博客 提 人 世 项 目 开 发 过 程 同 步 系列 教程 多 齐 ,手把手 的 才 作 如何 开 发 同类 肝 饥 


1.3.3 ”用 户 管理 


用 户 管理 支持 用 户 的 增 、 删 、 改 、 查 功能 ， 用 户 可 以 配置 角色 和 机 构 。 男 外 ， 在 工具 栏 提 
供 了 表格 列 过 滤 和 导出 Excel 表格 的 实现 范例 ， 如 图 1-5 所 示 。 


邮箱 


晶 册 mim 


liubei 


zhaoyun 


zhuyeliang 


CADCaod 


amwa 


wahoudun 


XU 


Sunguan 


1.3.4 机构 管理 
机 构 管理 支持 机 构 的 增 、 删 、 改 、 查 功能 ， 是 树 型 层级 结构 ， 如 图 1-6 所 示 。 


项 目 径 理 


讽 卫 人 同 


项 目 径 理 


开发 人 员 


再 点 人 后 


dmingg.com 


liestiaydd. com 


itest@qgq.com 


本 stWgg.com 


tiestiqg.com 


itestiaqg.com 


itestiaiqg.com 


teest@qg.com 


iestimqgq.com 


13612345678 


13889700023 


1389700023 


13889700023 


13889700023 


138869700023 


13889700023 


138869700023 


13889700023 


其 届 条 
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任 系统 介绍 中 机 构 管 理 * 


创建 从 创 主 时 间 


admin 2089/23 1935-22 


adimin 20109723 1 3717 


amin 2018923 19-380 


adimin 动 币 让 有 人 大 3 1 本 区 :5 


| 


| 
沾 
并 


amin 2089723 1 站 35:55 


agmin 20823 1 6.24 


amin 2D 1 19.40.42 


= =, 
| 


amin 2D018923 19:40-54 


adlmin 2018923 19- 寺 1 站 


1.3.5 角色 管理 
角色 管理 支持 角色 的 增 、 删 、 改 、 查 功能 ， 支 持 给 选 定 角 色 配 置 不 同 的 菜单 权限 ， 如 
图 1-7 所 示 。 


而 系统 介绍 角色 管理 * 


创建 时 间 
超级 管理 周 20191719 11-11:11 
项目 和 经理 | 201W1MH9 11-11:11 


开 点 大 员 201 和 719 11-11:141 


型 志 人 所 201%W179 11-44-141 


共 4 计 


Ph 性 村 人 有人 TSwagger-uihtrml 


站 eneraiongenmerator 
(syY5onNline 


国人 站 下 重围 请 羡 


佳 用 案例 


图 1-7 


1.3.6 ”菜单 党 理 


菜单 管理 支持 菜单 的 增 、 删 、 改 、 查 功能 ， 是 树 型 层级 结构 。 菜 单 可 以 设置 类 型 、 图 标 、 
权限 标识 和 菜单 路 径 URL 属性 ， 如 图 1-8 所 示 。 
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蕴 单 URI 


hitpen N27.0. 0 118001... 


未 六 监 扶 hitp:i 27.0.0 1.80011.. 

至 纹 监 控 http:i127.0.0. 1:8000 
* 忙 吗 生 成 1 Igeneratorigeneralor 
* 在 团 用 户 ge : Sysionline 


F 司 用 案 阅 
图 1-8 


1.3.7 字典 省 理 
字典 管理 支持 数据 字典 的 增 、 删 、 改 、 查 功能 ， 如 图 1-9 所 示 。 


疗 用 户 管理 . 机 构 管 理 党 角色 管理 


亨 奸 时 间 
2018923 4699-52 
D1 19-5317 


下 过 至 


1.3.8 ”系统 配置 
系统 配置 支持 系统 配置 信息 的 增 、 删 、 改 、 查 功能 ， 如 图 1-10 所 示 。 


值 本 i 创 津 大 创 旦 时 间 


于 证 如 39 访 | 下 己 dmin 2018/923 19-52:54 


共 14 条 
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1.3.9 ”登录 日 志 
登录 日 志 支 持 系统 登录 日 志 的 查询 ， 如 图 1-11 所 示 。 


量 作 


=| 
对 
时 


[= 
证 
Ei 


= 各 症 = 各 国 = 到 暂 =! 
省 间 车 关 第 拓 哮 间 芝 


局 
证 
中 
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他 用 户 管理 巴 机 构 管 理 全 前 色 管 理 | 区 亨 些 管理 区 系统 配 吾 灼 登录 日 去 “ 


IP ; 亨 丁 人 鹿 奸 时 间 


adrmin login 全 在 人 0 admin 2018/923 19-54:16 
adrmin ogout 人 让 全 在 信 灿 红 1 Bdmin 00523 19-54:17 
adrmin lpgin 人 应 信 在 信人 比 者 Bdmin 2018923 19-54:18 
adrmin 了 guUt 如- 让 心 :站 必 站 -水 admin 2018023 209-5420 
adrmin logn 让 人 在 全 0 中 1 admin 2018023 19-54:20 
adrmin Iogout 如- 小 心 :不 必 站 -应 admin 2018023 190-54:21 
下 gmMin Ioan OroO00001 ad 201823 19-54.22 
agmin II 本 和 O00001 admin 2018N23 19-54.23 


agmin moout Oroctori sdimin 2019 21 10-15:.43 


前 往 1 页 
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1.3.10 ”操作 日 志 
操作 日 志 支 持 系统 用 户 操作 日 志 的 查询 ， 如 图 1-12 所 示 。 


FE 


方法 季 数 : 创建 时 间 


_ Co louis. kitry admin sevice. mpl.s columnPFilers laa Cname label, val pe i 
drmin O0000"O-1 二 2010923 19.54:16 
ysDIictSenncelmpl.indFPagel] Ue™™]."pageNuyum"1."pagesize a 


Com. lowis. kity admin sevice. impl.s TeolumnFilers name .mame". name", vy A EY | 
ER | =， 20189/23 19-54-1 了 
rsRoleSernyicelmpl.iindPaged) alue™ pageNum 1. "pagesee"sl 
Com.louls. kity admin sevice. impl.s eolumnFners nme name narme , V 
ysUserSenicelmpl findPager) alue™ Hl "pageNum 1 "pagqesee'.sl 


O000-0"00-1 20109/23 19.54:18 


Com. louis. kity. admin sevice. impls TealumneFilers"rlabal "rname label”, “val 
admin . | | 由 OOOO0O-1 4 201923 19.54-20 
yeEDictSenncelmpl.iindPage(] Ue™™ pageNyum"-1."pageSize :dt 


com.louis kity admin sevice. impls -eolumneFilers name rname" name" vy 
admin | | OPOO0O-1 201923 19.54:20 
YsRoleServicelmplindPaged ale™™ pageaNum 1,"pagesee':el 


Com.louis. kity. admin sevice.impls {emumnFlers" name rname" name", vy 
admin ee | 汪 | OOO-00O-1 2 201819 23 19.54-21 
velUserServicelmpl.tindPager) alue™.™h pageNum":1,"pagesee.el 


com.louis kity admin sevice. impls -FeolumnFilers name Tname™ name" wy 
dmin UEDA | : 2010%23 19.54:22 


= ET ET 
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1.3.11 注册 中 心 

注册 中 心 可 以 查看 Consul 注册 中 心 的 服务 页 面 ， 可 以 查看 当前 服务 的 注册 情况 和 健康 状 
况 信 息 ， 如 图 1-13 所 示 。 
1.3.12 ”接口 文档 

接口 文档 可 以 查看 Swagger 集成 的 接口 文档 页 面 ， 如 图 1-14 所 示 。 
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地 广 册 中 心 %* 


人 ET La Nedes Ke¥yr Value 击 忆 | lIntentiens Deeaurmentlatianm 


Services 


Nade Health 


camsul 凯 1 
Mange-admin 可 5EcUre=false 
mango-badckyup serure=false 


mango-meniter seeuUre=false 


ld Hashe mp Coms 140 Decummertshon 


到 1-13 


却 注册 中 心 自控 口 六 档 * 
{ SWagger 


basic-error-controller Basic Error Coentrollsr 
operation=handler cperation Handler 
sys-config-controller sys config Controller 
sys-dept-controller sys Dept Cortroller 
sys-dict-controller sys cict controler 


sys-log-controller sys Log Controller 


1.3.13 ”数据 监控 


数据 监控 可 以 但 看 Druid 提供 的 数据 监控 界面 ， 可 以 得 看 SQL 监控 、Session 监控 等 信息 
内 容 ， 如 图 1-15 所 示 。 


任 系 统 介 闸 。 。 笑 数 所 监 演 > 
Druid Moniter un 到 二 译 3 总 点 近 SQL 防火 二 Wieb 应 用 URI 生 注 


SQL Stat View JSON API 


SOL™T 


updae 411 | [3.450.000.0,0 [2.15,0,0,0,0,0,0) [D0000M [O17,0,.0,0,0i 
sys_login_log 


Select Lu ™, [全 [站 站 ,全 [站 二 站 站 站 前 [和 站 ,的 
[select d nam.. 


select u*, | ,本 和 [0.414,0,0,0.0 [1 总 亲 亲 站 和 
[aelect d nam.. 


select U*, [#75.14.00.0.0.0 [三 生 们 外 全 全 仙人 [8.0000 [56.,0.0.0.0.0M 
[select d nam.. 


Selectrmzfrom 2 ] | ,二 [We | [避让 立 站 站 前 [过 ,和 站 .全 
sys_meny ... 


select id, val... Ee [0,0 [DF [FO 000 


Se 有 e 导 i 讨 wal... | 店 ,十 帮 , 必 , 必 放心 ,人 [7 [DN [7 O00 ,0.0 
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1.3.14 ”服务 监控 


服务 监控 可 以 查看 Spring Boot Admin 提供 的 Spring Boot 应 用 监控 页 面 ,查看 应 用 的 CPU、 
线程 、 内 存 和 垃圾 回收 状态 等 信息 ， 如 图 1-16 所 示 。 


Mango Platform 四 立 档 “博客 
前 ”系统 管理 十 系 统 放 引 @ 数 插 监控 地 服务 监控 x 


用， 服务 治理 Spring Boot Admin 


国 “接口 文档 
起 PPLICATIOQNS INSTANCES 


和 ”系统 监控 A 1 1 


稳 数据 监控 


心服 务 监控 
sw mango-admin 


sm http://GG20J1G2E.logon.ds.ge.com:8001/ 


图 1-16 


1.3.15 备份 还 原 


备份 还 原 入 口 在 用 户 信 息 和 面板， 可 以 提供 系统 数据 的 备份 和 还 原 ， 包括 备份 创建 、 备 份 删 
除 、 备 份 查询 和 备份 还 原 功 能 ， 如 图 1-17 所 示 。 


自 接口 立 档 导 水 所 点 控 二 瞩 务 监控 地 在 经 用 户 < ER 
备份 还 原 x 多 b 


， 牛 管 - 超级 管理 员 
系统 默认 备份 2018/814 11:11:11 


backup 2019-01-22 181723 
followers watches friends 


backup 2019-01-22 181721 


日 店 大 中心 备 眉 改 密码 
backup 2019-01-22 181718 


过 清除 择 存 
品 在 浅 人 数 1 
息 访问 次 数 15 


全 备 份 还 原 


图 1-17 


1.3.16 ”主题 切换 
主题 切换 支持 通过 主题 切换 器 实现 一 键 换 肤 的 功能 。 
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1. 绿色 主题 《如 图 1-18 所 示 ) 


Mango Platform 用 


DD 六 位 和 引 数据 监控 


”机构 管理 用 户 名 


:i 角色 管理 2min 


liubes 
菜单 管理 
Zhao ur 
zhuygelang 
?系统 配 富 EY 
登录 日 鹿 1 三 mwai 
xlhoudun 


操作 日 志 


XU 
1 服务 治 涅 


sunguan 


外 ”接口 立 档 


Mango Platform | 


用 户 名 
admin 
lIubes 
zhacyun 
zhugeliang 
Caocaod 
dmvrei 
wiahoudun 
RELYU 


sundquan 


已 机 构 管 理 号 角色 管理 


最 宵 
adminGqg.com 
记 st 久 gq.com 
开 懂 儿 岗 tiestod.com 
测试 人 员 记 shiaeqqcom 
项 目 经 得 tact cor 
天 和 卜 太 员 iestiakqg. com 
lestiigq.com 
记 厂 B.Cc0m 


lestidqqg.com 


国志 
| 
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hm 


89 荣 兰 管理 世 字 些 管理 


腿 户 


admmn 避 qq.Com 


记 是 加 09.00m 


认 纯 总 :9 . 园 而 


iestimqgq.com 


二 弛 最 09.00m 


lsstrBog.com 


lestimog. com 


让 巧 部 :99 .区 而 


证 sb 名 qq.cam 
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于 机 


13612345676 


13880700023 


13689700024 


13889700M23 


13880700023 


和 3 扣 9700023 


138890700023 


13889700023 


13889700M23 


芷 条 


13612345678 


13899700023 


13839700023 


13829700023 


13839700023 


13839700023 


13999700023 


13830700023 


1382970023 


失忆 时 


杂 


第 2 章 
如 下 措 且 


本 章节 介绍 如 何 本 地 安装 运行 Mango 权限 管理 系统 ， 着 眼 于 实践 ， 建 议 读者 结合 源码 和 
书本 内 容 逐 步 学 习 和 掌握 Mango 系统 的 整个 开发 过 程 。 因 为 是 前 后 端 分 离 项 目 ， 所 以 项 目 安 
装 指南 分 为 前 端 安装 指南 和 后 端 安装 指南 两 部 分 。 


前 师 安 洲 措 南 


本 系统 前 闹 使 用 Vue.js 和 Element 框架 搭建 ， 基 于 NPM 环境 开发 ， 所 以 在 开 发 之前， 需 
要 先 安 装 Node.JS， 开 发 工具 为 Visual Studio Code， 当 然 谈 者 也 可 以 根据 目 己 的 豆 好 选择 其 他 
开 友 工具 ， 比 如 说 WebStorm， 具 体 开 发 环境 的 搭建 请 参考 后 续 草 节 : 前 六 实现 局 晶 搭 建 开 友 
环境 ， 这 里 独 重 说 明 以 下 现 有 源码 的 安 半 和 运行 


2.1.1 开发 环境 
前 端 开 发 环境 基于 NPM 环境 ， 使 用 VS Code 开发 。 
IDE : VS Code 1.21 


NODE: Node 10.15.xx 
NPM : NPM 6.4.xX 


2.1.2 技术 选 型 
前 病 拉 术 主 要 使 用 Vue.js 和 Element UI 框架 。 
前 端 框架 : Vue 2.x 
页 面 组 件 : Element 2.x 
状态 管理 : Vuex 2 .x 
后 全 区 互 : axios 0.18.x 
图 标 使 用 : Font Awesome 4.x 
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mango—ui 

-- build: 项 目 编译 相关 模块 ， 项 目 模板 自动 生成 

LONntig: 项 目 配置 相关 模块 ， 项 目 模板 目 动 生成 

-- src: 项 目 源码 模块 ， 前 端 开 肥 工作 集中 在 此 目录 
-- assets: 图 标 、 字 体 、 国 际 化 信息 等 静态 信息 
一 Components: 组 件 库 ， 对 常用 组 件 进行 封装 
-- http: 后 人 台 区 互 模块 ， 统 一 后 全 接口 请 求 API 
-- il8n: 国际 化 模块 ， 使 用 Vue i18n 进行 国际 化 
-一 mock: Mock 模块 ， 模 拟 接口 调用 并 返回 定制 数据 
-- permission: 权限 控制 模块 ， 处 理 权 限 认 证 逻辑 
TOUDeEr: 路 由 管理 模块 ， 负责 页 面 各 种 路 由 配置 
—— Stores: 状态 管理 模块 ， 提供 组 件 间 状态 共享 
-- utils; 工具 模块 ， 提 供 一 些 通用 的 工具 方法 
-- views: 页 面 模块 ， 主 要 放置 各 种 页 面 视 图 组 件 


2.1.4 编译 运行 
编译 运行 步 又 说 明 如 下 。 
(1) 获取 源码 。 获 取 前 端 源 码 ， 整 个 前 问 只 有 一 个 工程 mango-m， 将 其 备份 帮 置 到 本 地 
目录 。 
(2) 编译 源码 。 在 mango-ui 目录 下 打开 CMD 终 剖 ， 执 行 npm install, 下 载 和 安装 项 日 
依赖 包 。 
(3) 局 动 系统 。 执 行 npm run dev 命令 ， 局 动 项 目 ， 局 动 之 后 通过 http://localhost:8080 访问 。 
(4) 项 目 打包 。 执行 npm run build 命令 ， 进 行 前 奖项 目 打包 ， 打 包 完 成 之 后 会 生成 dist 
目录 。 
将 生成 的 目录 直接 放置 到 如 Tomecat 之 类 的 Web 服务 器 ， 局 动 服务 即 可 访问 。 
(5) Mock 开关 。 本 系统 采用 前 后 端 分 离 染 构 ， 前 问 夺 开局 Mock 模块 ， 则 可 模拟 大 部 
分 接口 数据 。 
通过 修改 src/mock/index.js 中 的 openMock 变量 ， 可 以 一 键 开 局 或 天 闭 Mock 功能 。 
(6) 修改 配置 。 如 果 想 目 定义 问 口 (默认 是 8080) ， 可 以 修改 config/index.js 下 的 port 
属性 。 
后 台 接 口 和 备份 服务 器 地 址 配置 在 src/utils/global.js， 如 有 修改 请 做 相应 变更 。 


后 病 安 沪指 南 


2.2.1 开发 环境 
后 病 开 发 环境 基于 Java 环境 ， 使 用 Eclipse 开发 。 
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第 2 章 安装 指南 


IDE : eclipse 和 4- 七 
JDK : JDKRK1.8.xX 
Maven : Maven 3.5.X 
MYSQL : MySOL SS./.X 
Consul: Consul 1 .4.0 


2.2.2 ”技术 选 型 
后 疹 技 术 主 要 使 用 Spring Boot、Spring Cloud 和 MyBatis 框架 。 


核心 框架 : SPIring Boot 2.xX 

服务 治理 : spring Cloud Finchley 
安全 框架 : Spring Security 5.x 
视图 框架 : SPIring MVC SS.xX 
持久 层 框架 : MyBatis 3.x 
数据 库 连 接 池 : Druidqd 1.x 

消息 队列 RabbitMo 

接口 文档 ，Swadgger 2.9.x 

上 上 EE ned nan 


2.2.3 项 目 结构 
后 端 项 目 源码 工程 结构 如 下 : 


mangdo-common: 公共 代码 模块 ， 主 要 放置 一 些 工 具 类 
mango—core: 封装 业务 模块 ， 主 要 封装 公共 业务 模块 
mango-admin: 后 台 管 理 模块 ， 包 仿 用 户 、 角 色 、 尘 单 管理 等 
mango-backup: 系统 数据 备份 还 原 模块 ， 可 选择 独立 部 署 
mango—monitor: 系统 监控 服务 端 ， 监控 SPTI1IDnG Boot 应 用 
mango—producer: 服务 提供 者 示例 ， 方 便 在 此 基础 上 搭建 模块 
mango-consumer: 服务 消费 者 示例 ， 方 便 在 此 基础 上 搭建 模块 
mango—hystrix: 服务 熔断 监控 模块 ， 收 集 汇 总 炊 断 统计 信息 
mango—zuul: API 服务 网 关 模 块 ， 统一 管理 和 转发 外 部 调用 请 求 
mango-config: 配置 中 心服 务 问 ， 生 成 GIT 配置 文件 的 访问 接口 
mango-consul:; 注册 中 心 ， 安 装 说 明 目 录 ， 内 附 安 装 引 导 说 明 
mango——zijpkin: 链 路 追踪 ， 安 装 说 明 目 录 ， 内 附 安装 引导 说 明 
config—repo: 配置 中 心 仓库 ， 在 GSIT 上 统一 存储 系统 配置 文件 
mango-pom: 聚合 模块 ， 仅 为 简化 打包 ， 一 键 执 行 打包 所 有 模块 


2.2.4 编译 运行 


1. 编 至 运行 步 又 
(1) 获取 源码 。 获 取 后 端 源码 ， 获 取 上 面 所 列 的 所 有 项 目 结构 ， 将 其 备份 放置 到 本 地 目录 。 
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Spring Boot+Spring Cloud+Vue+Element 项 目 实战 : 手把手 教 你 开发 权限 管理 系统 


(2) 导入 工程 。 使 用 Eclipse 导入 Maven 项 目 , 在 此 之 前 请 确认 已 安装 JDK 和 Maven 
工具 。 

(3) 编译 源 公 。 找 到 mango-pom 工程 下 的 pom.xml， 执行 maven clean install 命令 进行 一 
键 打 包 。 一 般 来 说 不 会 有 什么 问题 ， 如 果 打 包 失败 ， 可 以 尝试 按照 优先 级 逐个 编译 。 

(4) 导入 数据 库 。 新 建 mango 数据 库 ， 使 用 项 目 sql 目录 下 的 mango.sql 脚本 ， 导 入 初 
始 化 数据 库 。 


修改 mango-admin 下 application.yml 中 的 数据 源 配置 信息 为 目 己 的 数据 库 配置 。 
修改 mango-backup 下 application.yml 中 的 数据 源 配置 信息 为 目 己 的 数据 库 配 置 。 


(5) 局 动 系统 
e。 基础 必需 模块 (注册 中 心 ，mango-consul; 服务 监控 ，mango-monitor ) 


找 到 mango-consul 工程 ， 根据 安装 说 明 安装 注册 中 ss 执行 consul agent -dev 局 动 
找到 mango-monitor 工程 下 的 MangoMonitorApplication， 尼 动 项 目 ， 开 局 服务 监控 。 


e@ 权限 管理 模块 (权限 管理 ，mango-admin; 备份 还 原 ，mango-backup ) 


找到 mango-admin 工程 下 的 MangoAdminApplication， 忆 动 项 目 ， 开 局 权限 系统 服务 。 
找到 mango-backup 工程 下 的 MangoBackupApplication.java， 尼 动 项 目 ， 开 局 备份 服务 。 


e 其 他 示例 模块 ( Spring Cloud 示例 模块 ， 作 为 开发 模板 和 范例 ， 根 据 需 要 启动 ) 


以 下 为 Spring Cloud 体系 各 种 功能 的 实现 范例 ,可 以 根据 再 要 局 动 ， 后 续 扩 展开 有 友 也 可 以 
作为 参考 和 模板 使 用 ， 有 具体 使 用 教程 请 参考 本 书后 面 Spring Cloud 系列 教程 的 章 世 ， 关 于 
Spring Cloud 体系 的 各 种 功能 模块 部 有 评 细 的 讲解 和 完整 的 生 例 实现 。 

这 些 示例 模块 包括 : 

e mango-producer: 服务 提供 者 示例 ， 演 示 服 务 提 供 者 的 实现 。 

e mango-consumer: 服务 消费 者 示例 ， 演 示 服 务 消费 者 的 实现 。 

e mango-hystrix: 服务 熔断 监控 模块 ， 演 示 熔 断 监 控 功 能 的 实现 。 

e mango-zuul: API 服 务 网 关 模 块 ， 演 示 API 统一 网 关 的 实现 。 

e mango-config: 配置 中 心服 务 端 ， 演 示 分 布 式 配 置 中 心 的 实现 。 

2. 注意 事项 

(1) 注册 中 心 是 基础 服务 ， 需 要 先 安装 Consul， 找 到 mango-consul 工程 ， 根 据 安 装 说 明 
安装 Consul 。 

(2) 如 果 需 要 链 路 追踪 服务 ， 需 要 安装 zipkin， 找 到 mango-zipkin 工程 ， 根 据 安装 说 明 
安装 Zipkin。 

(3) 如 果 和 需要 配置 中 心服 务 ， 需 要 安装 rabbitMQ， 找 到 mango-config 工程 ， 根 据 安装 说 
明和 安装 rabbitMQ。 
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条 3 草 


天 鹤 拉 证 


Spring Boot 


Spring Boot 是 由 Pivotal 团队 提供 ， 设 计 用 来 简化 新 Spring 应 用 的 初始 搭建 和 开 友 过 程 的 
开源 框 淋 。 大 家 部 知 意 ， 随 看 Spring 体系 越 来 越 斋 大 ， 各 种 配置 也 十 越 来 越 锭 来 ， 置 经 有 多 
少 开 友人 员 在 埋头 修改 配置 文件 的 时 候 对 此 咯 之 以 时 ， 下 到 Spring Boot 的 诞生 。Sprmng Boot 
遵循 约定 优 于 配置 的 规则 , 使 用 特定 的 方式 来 进行 配置 ， 从 而 使 开 肥 人 员 不 再 需要 定义 各 种 样 
板 化 的 配置 ， 将 开 肥 人 员 从 款 杂 的 配置 文件 中 解放 出 来 。 

Spring Boot 其 实 并 不 是 什么 新 的 框 如 ， 它 只 是 默认 配置 了 很 多 框架 的 使 用 方式 ， 残 像 
Maven 整合 了 所 有 的 jar 包 一 样 ，Spring Boot 整合 了 所 有 的 框架 。 使 用 Spring Boot 可 以 非 第 
方便 、 快 速 地 搭建 我 们 的 项 目 , 使 我 们 可 以 不 用 关心 各 框 染 之 间 的 莱 容 性 、 版 本 适用 性 等 问题 ， 
我 们 想 使 用 什么 东西 ， 往 往 只 需 添 加 一 个 配置 即 可 。 另 外 ，Spring Boot 内 置 了 服务 器 ， 使 得 
服务 的 测试 和 部 赣 也 变 得 非 党 方便， 所 以 Spring Boot 非 钊 适合 开 肥 做 服务 。 

官方 教程 : http://spring.io/projects/spring-boot/ 。 


Spring Cloud 


3.2.1 Spring Cloud 简介 

Spring Cloud 是 一 个 做 服务 框架 。 相 比 Dubbo 等 RPC 框架 ，Spring Cloud 提供 的 是 一 整 尽 
分 布 式 系统 解雇 方案 。 马 为 做 服务 架构 开 肥 中 所 涉及 的 服务 治理 、 服 务 燃 断 、 和 鲁能 路 由 、 链 路 
追踪 、 消 息 总 线 、 配 置 管理 、 集 群 状态 管理 等 操作 都 提供 了 一 种 简单 的 开发 方式 。 
3.2.2 Spring Cloud 染 构 

Spring Cloud 的 染 构 大 人 致 如 图 3-1 〈 来 目 互 联网 ) 所 示 。 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


Spring Cloud 组 件 架 构 


于 更 醒 


Sn" 外 Register 
Health Check 


| (Bureka 
Client) 


图 3-1 


3.2.3 Spring Cloud 组 件 


Spring Cloud 是 一 个 全 套 的 框架 ， 整 个 框 染 系 统 包含 人 剖 种 方 方 面 务 的 功能 组 件 ， 组 件数 量 
烷 多 ， 这 里 针对 一 些 比较 沼 用 的 组 件 进行 说 明 。 
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Netflix Eureka: 一 个 基于 REST 服务 的 服务 治理 组 件 ， 包 括 服务 注册 中 心 、 服 务 注册 
与 服务 发 现 机 制 的 实现 ， 目 前 仍 是 Spring Cloud 的 默认 内 置 注 册 中 心 组件 ， 不 过 自从 
Eureka 2.0 停止 开发 的 消息 以 后 ， 有 逐渐 被 Consul 等 注册 中 心 替 代 的 趋 拖 。 

Netflix Hystrix: 容错 管理 工具 ， 实 现 断 路 器 模式 ， 通 过 控制 服务 的 节点 ， 从 而 对 延迟 
和 故障 提供 更 强大 的 容错 能 力 。 

Netflix Ribbon: 实现 客户 端 负载 均衡 的 服务 调用 组 件 。 

Netflix Feign: 基于 Ribbon 和 Hystrix 的 声明 式 服 务 调 用 组 件 。 

Netflix Zuul: 微服 务 网 关 ， 提 供 动态 路 由 ， 访 问 过 滤 等 服务 。 

Spring Cloud Config: 配置 管理 工具 ， 支 持 使 用 Git 存储 配置 内 容 ， 支 持 应 用 配置 的 外 
部 化 存储 ， 支 持 客户 端 配置 信息 刷新 、 加 解密 配置 内 容 等 。 

Spring Cloud Bus: 事件 、 消 息 总 线 ， 用 于 在 集群 ( 例如， 配置 变化 事件 ) 中 传播 状态 
变化 ， 可 与 Spring Cloud Config 联合 实现 热 部 省 。 

Spring Cloud Sleuth: 日 志 收 集 工 具 包 ， 封 于 了 Dapper、ZipKin 和 HTrace 操作 。 

Spring Cloud Consul: 封装 了 Consul 操作 ,Consul 是 一 个 服务 发 现 与 配置 工具 ,与 Docker 
容器 可 以 无 颖 集成 。 

Spring Cloud Zookeeper: 操作 Zookeeper 的 工具 包 ， 用 于 使 用 zookeeper 方式 的 服务 注 


第 3 章 ”关键 技术 


e Spring Cloud Stream: 数据 流 操 作 开发 包 ， 封装 了 与 Redis、Rabbit、Kafka 等 发 送 接 收 
消息 的 接口 。 

e Spring Cloud Data Flow: 大 数据 操作 工具 ， 通 过 命令 行 方式 操作 数据 流 。 

e Spring Cloud Security: 安全 工具 包 , 为 你 的 应 用 程序 添加 安全 控制 , 主要 是 指 OAuth2。 


3.2.4 参考 教程 
提供 一 些 Spring Cloud 的 参考 资料 : 


e 官网 教程 : http://spring.io/projects/spring-cloud 
e 博客 教程 : https://www.cnblogs.com/xifengxiaoma/p/9798330.html 


Spring Security 


Spring Security 是 Spring 社区 的 一 个 顶级 项 目 ， 也 是 Spring Boot 官方 推荐 使 用 的 安全 
框 避 。Spring Security 是 一 个 强大 且 文 持 蜗 度 目 定 义 的 安全 框架 ， 可 以 为 系统 在 登录 认证 和 访 
问 授 权 两 大 核心 安全 方面 提供 强 有 力 的 你 障 。 

e 官网 教程 : https://spring.io/projects/spring-security 

e 博客 教程 : https://www.cnblogs.com/xifengxiaoma/p/10020960.html 


MyBatis 


MyBatis 是 一 球 非 常 优秀 的 持久 层 框 架 ， 可 以 支持 定制 化 SQL、 存 储 过 程 以 及 噩 级 映射 
等 高 级 特性 。MyBatis 可 以 使 用 简单 的 XML 或 注解 来 配置 和 映射 原生 信息 ， 将 接口 和 Java 
的 POJOs 对 象 映 射 成 数据 库 中 的 记录 , 使 用 MyBatis 可 以 避免 几乎 所 有 的 JDBC 代码 , 无 须 
手动 设置 参数 和 获取 结果 集 。 相 比 类 似 Hibernate 这 种 完全 ORM 框架 , MyBatis 其 实 只 能 算是 
SQL Mapping 框 句 ， 两 种 方式 各 有 优 务 ，MyBatis 虽然 编写 Mapping 文件 有 点 有 抹 烷 ,但 员 在 灵 
活 ， 故 深 受 企业 的 于 宕 ， 成 为 当前 主流 的 持久 层 框 架 。 

e 官网 教程 : http://www.mybatis.org/mybatis-3/zh/ 

e W3C 教程 : https://www.w3cschool.cn/mybatis/ 


Vue.js 
Vuejs 是 当前 前 端 领域 主流 的 核心 框架 之 一 ， 特 别 深 受 国内 用 户 的 喜爱 。 
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Vuejs (读音 /vju: /， 类 似 于 view) 是 一 套 构建 用 户 界面 的 渐进 式 框架 。 

Vue 只 天 注视 图 层 ， 采 用 目 谨 同上 增 量 开 上 友 的 设计 方式 ， 非 党 容易 上 手 。 

Vue 的 目标 是 通过 尽 可 能 简单 的 API 实现 啊 应 的 数据 绑 定 和 组 合 的 视图 组 件 。 
e 官网 教程 : https:Wcn.vuejs.org/v2/guide/ 

e 菜 乌 教程 : http://www.runoob.com/vue2/vue-tutorial.html 


3 .6 Element 


Element 是 国内 饼 了 么 开源 的 一 套 前 闫 UI 杠 如， 提供 了 较为 丰 曙 的 组 件 ， 界 面 笛 涪 优 雅 ， 
同样 深 受 国内 开发 者 的 里 爱 。Element 分 别提 供 了 Vue.js、React 和 Angular 的 实现 ， 本 书 将 使 
用 Vuejjs 版 本 搭建 Mango 常理 系统 的 界面 。 


e 家 网 教程 : http://element.eleme.io/#/zh-CN 
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第 二 局 
后 通关 现 属 


本 篇 内 容 为 后 端 实 现 篇 ， 全面 细 致 地 讲解 了 Mango 权限 管理 系统 的 后 端 实 现 全 过 程 。 
从 零 开 始 ， 逐 步 扩 展 ， 逐 疡 完善 ， 手把手 地 教 你 如 何 利用 Spring Boot 和 Spring Cloud 构 
建 伍 服 务 系统 。 


第 4 章 数据 库 设计 ,详细 地 阐述 设计 原则 、 表 间 关 系 和 数据 库 表 结 构 。 

第 5 章 搭建 开发 环境 ,元 整地 阐述 和 示范 后 端 开发 环境 的 搭建 和 安装 。 

第 6 章 集成 Swagger 文档 ,阐述 和 实现 如 何 集成 Swagger 并 进行 接口 测试 。 

第 7 章 集成 MyBatis 框架 , 阐述 和 实现 如 何 集成 MyBatis 进行 数据 库 操作 。 

第 8 章 集成 Druid 数据 源 ， 阅 述 和 实现 如 何 集成 Druid 数据 源 和 查看 SQL 监控 。 

第 9 章 跨 域 解决 方案 ,阐述 什么 是 跨 域 并 提供 CORS 实现 跨 域 的 解决 方案 。 

第 10 章 业务 功能 实现 ， 对 权限 系统 后 台 涉 及 的 业务 功能 接口 统一 设计 开发 。 

第 11 章 登录 流程 实现 ， 讲 解 如 何 集成 Spring Security 并 完善 登录 流程 。 

第 12 章 数据 备份 还 原 ,， 讲解 如 何 通 过 调用 MySQL 命令 完成 数据 备份 还 原 。 

第 I3 章 系统 服务 监控 ,讲解 如 何 集成 Spring\Boot Admin 实现 服务 监控 。 

第 14 章 注册 中 心 ( Consul ) ,讲解 如 何 安 装 Consul 注册 中 心 和 服务 客 尸 端的 注册 、 

第 15 章 服务 消费 ( Ribbon、Feign ) ,阐述 和 实现 如 何 通过 ,Ribbon 和 Feign 进行 服 
务 消 费 。 

第 16 草 服务 熔断 ( Hystrix、Turbine ) '，, 讲解 如 何 集成 Hystrix 和 Turbine 进行 服 

第 17 章 服务 网 关 ( Zuul ) , 曾 述 和 示范 如 何 通过 Zuul 实现 智能 路 由 ; 提供 ,API 网 关 。 

第 18 章 链 路 追踪 (Sleuth、ZipKin ) ,讲解 如 何 集成 Sleuth 和 ZipKin 进行 服务 调 
用 的 链 路 追踪 。 

第 19 章 配置 中 心 ( Config、Bus)\ ; 讲解 如 何 通 过 'Spring \Gloud Config 实现 分 布 
式 配 置 中 心 。 


所 4 草 


忒 据 库 记 计 


数据 库 表 设计 


在 经 过 对 权限 管理 系统 做 了 细致 的 需求 分 析 和 功能 分 析 之 后 ， 我 们 列 出 需要 实现 的 需求 : 


e 系统 登录 : 能 够 进行 系统 登录 。 

e 用 户 管 理 : 提供 用 户 管理 界面 。 

e 机 构 管 理 : 提供 机 构 官 理 界 面 。 

e 角色 管理 : 提供 角色 管理 界面 。 

@ 菜单 管理 : 提供 菜单 管理 界面 。 

e 字典 管理 : 提供 字典 管理 界面 。 

e 登录 日 志 : 提供 登录 日 志 界 面 。 

e 操作 日 志 : 提供 操作 日 志 界 面 。 

e 数据 监控 : 集成 Druid 数据 监控 。 

e@ 服务 监控 : 集成 Boot Admin 服务 监控 。 
e@ 服务 治理 : 集成 Spring Cloud 服务 治理 。 


基于 以 上 需求 , 结合 各 功能 需求 之 间 的 且 接 关系 , 我 们 需要 设计 出 权限 党 理 系统 的 数据 库 


这 里 ,我 们 的 数据 库 人 设计 如 循 以 下 原则 : 


e 所 有 数据 库 表 均 采用 长 整 型 的 “编号 ”字段 作为 表 的 主键 。 

e 编号 、 创 建 人 、 创 建 时 间 、 更 新 人 、 更 新 时 间 为 所 有 表 的 共同 字段 。 

e@ 表 间 关系 采用 各 表 编 号 进行 关联 查询 ， 不 定义 实际 数据 库 外 键 。 

e 本 系统 涉及 的 数据 库 脚本 均 采 用 MySQL， 其 他 数据 库 脚本 请 自行 处 理 。 


数据 库 表 关系 


整体 数据 库 表 间 关系 如 图 4-1 所 示 。 
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sys _ role menu | syYs_ menu 

id: bigint | El id: pigint | Bl id: bigint 
name: varchariso) , | role_id: bigint | name: warchartso) 
nick_nmame:warcharr sys_role | menu id: bigint We _role_menu parent_id: bigint 
avatar : warcharr Sb) | ey 本: bigint | | create_by: varchartsn) | url: warchart200) 
password: varcharf100) name: varcharr liomel_role_rolg_meny create_time: datetime perms: varcharison) 
salt: varcharra40) remark: varchari lo last_ update_ by :varchar... type: int 

9 more columns... create_ by varcharrso) | last_update_time: dateti... 7 More columns... 


create_time.: datetime 


rel_user|user_role last_update_by: varchar... 


| sys_user_role last_update_time. datel.. sys_role_dept | sys_dept 
| : -一 del_ flag: tirnvint | 一 - | | : -一 
本 id: bigint Mn | tid: bigint id: bigint 

User_id: bigint | | 由 role_id: bigint | pt | | t name: varchariso) 
role_id: bigint i Ceh dept_ id: bigint I ep pe eh parent_id: migint 
create by: varcharrso' create by: varcharrso) | order_num: int 
create _ time: datetirme create time: datetime create by: varcharrso) 
last_Update by: varch.. rel_role_user_role last_update_ by varchar create_time. datetime 
last_update_time: dat... last_update_time.: dateti... | 3 more columns... 


| 


sys log 


| sys lIogin log 
| id: bigint 


a id: bigint id: bigint | lal jid: higint 
value: warcnar ao) value: varcharr i100 User_ name: varchariso user_ name: varchariso' 
label: varcharrion) label: warchar ob) operation: varcharrso) Status: varcharrso) 
type: varcharrino type: varcharri0o) method: varchari200) time: bigint 
description: varcharil... description: varcharr100' params: varchartso00) ip: varchariBd) 
| Fr Mmore columns... | l F More columns... | 6 more columns... 4 more Columns... 


图 4-1 
其 中 主要 包含 以 下 关系 : 
用 户 表 和 角色 表 通 过 用 户 角 色 表 关联 。 


e 角色 表 和 菜单 表 通 过 角色 菜单 表 关联 。 

e 角色 表 和 机 构 表 通过 角色 机 构 表 关联 。 

e 用 户 表 和 机 构 表 通过 用 户 的 机 构 ID 管理 。 

e@ 用 户 菜 单 和 按钮 权限 查找 流程 为 : 用 户 一 用 户 角色 一 角色 一 角色 菜单 一 菜单 。 


人 . .了 数据库 表 结构 
下 面 详细 给 出 各 个 数据 库 表 的 建 表 SQL， 格 式 为 MySQL 数据 库 脚本 。 


4.3.1 用 户 表 (sys_user) 


用 户 表 包含 用 户 信 息 ， 主 要 有 编号 、 用 户 名 、 昵 称 、 密 码 、 邮 箱 、 手 机 号 等 字段 ， 其 中 用 
户 表 通过 表 中 dept id 与 机 构 表 关联 ， 表 明 所 属 机 构 。 


CREATE TABLE SYS user 【 
“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“name ”varchar (50) NOT NULI COMMENT ' 用 户 名 "， 
“nick name” varchar (150) DEFAULT NULL COMMENT ' 昵 称 '， 
‘avatar varchar (150) DEFAULT NULL COMMENT :头像 '， 
“Password vwvarchar(100) DEFAULT NULL _ COMMENT 1 密码 ' ， 
“salt” varchar(40) DEFAULT NULI COMMENT ' 加 密 盐 "， 
“email varchar (100) DEFAULT NULL COMMENT "邮箱 ' ， 
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“mobile ”varchar(100) DEFAULT NULL COMMENT "手机 号 ' ， 
`“status ”tinyint(4) DEFAULT NULI COMMENT 状态 0: 禁用 1: 正常 '， 
‘dept id ”bigint (20) DEFAULT NULL COMMENT ' 机 构 ID'， 
‘create by varchar(50) DEFAULT NULL COMMENT ! 创 建 人 '， 
“create time” datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update by” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 ',， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
“del flag”tinyint (4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (“id), 
UNIOUE KEY name ( name ) 
) ENGINE=InnoDB AUTO INCREMENT=34 DEFAULT CHARSET=utf8 COMMENT=' 用 户 管理 " 


4.3.2 角色 表 (sys_role) 


角色 表 代 表 有 用户 角 色 ,， 用 户 拥有 有 角色， 角色 拥有 玉 单 ， 束 单 拥 有 权限 标识 ， 所 以 不 同 角 色 
拥有 不 同 的 权限 ， 角 色 表 主要 有 编写、 角色 名 、 备 注 等 字段 。 


CREATE TABLE SYS role ( 
`id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“name ”varchar (100) DEFAULT NULL COMMENT ' 角 色 名 称 '， 
“remark” varchar (100) DEFAULT NULL COMMENT ' 备 注 '， 
“create by”varchar(50) DEFAULT NULL COMMENT ' 创 建 人 '，, 
“create time” datetime DEFAULT NULL COMMENT ' 创 建 时 间 '"， 
“last update by” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 ',， 
“last update time”datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
“del flag” tinyint(4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT=' 和 角色 管理 '; 


4.3.3 机构 表 (sys_dept) 


机 构 代 表 一 种 组 织 机 构 , 可 以 有 子 机 构 , 用 户 归 属于 机 构 。 机构 表 主要 有 编号、 机构 名 称 、 
上 级 机 构 等 字段 。 


CREATE TABLE SYS dept  ( 
“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“name ”varchar (50) DEFAULT NULL COMMENT ' 机 构 名 称 '， 
“Parent id” bigint(20) DEFAULT NULL COMMENT ' 上 级 机 构 ID， 一 级 机 构 为 0"， 
‘order num int(11) DEFAULT NULL COMMENT EE 
“create by” ”varchar (50) DEFAULT NULL COMMENT ' 创 建 人 ', 
“create time”datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update by varchar (50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
“del flag”tinyint (4) DEFAULT '0' COMMENT ' 是 否 删除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (‘id.) 
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) ENGINE=INNODB AUTO INCREMENT=36 DEFAULT CHARSET=utIf8 COMMEFNT=" 机 构 管 理 3 


4.3.4 采 单 表 (sys _menu) 


沫 单 分 为 菜单 目录 、 羔 蛙 和 操作 按钮 3 种 类 型 ， 可 以 进行 权限 控制 ， 羔 蛙 表 主要 有 编号 、 
亲 单 名 称 、 父 玉 单 、 玉 蛙 类 型 、 玉 单 图 标 、 亲 蛙 URL、 亲 时 权限 等 子 段 。 


CREATE TABLE SYS menu ( 
“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“name ”varchar (50) DEFAULT NULL COMMENT 菜单 名 称 ' ， 
`“parent id”bigint(20) DEFAULT NULL COMMENT “' 父 菜单 ID， 一 级 菜单 为 0'， 
“url”varchar (200) DEFAULT NULI COMMENT ' 菜 单 URL, 类 型 ，1 .普通 页 面 (如 用 户 管理 ， 
/sys/user) 2. 骨 套 完整 外 部 页 面 ， 以 http (s) 开 头 的 链接 3. 骸 套 服务 器 页面 ， 使 用 iframe :前 缀 
标 URL (如 SoL 监控 ， ijframe:/druid/login.html，iframe: 前 级 会 普 换 成 服务 器 地 址 ) '， 
“perms ”varchar (500) DEFAULT NULL COMMENT ' 授 权 (多 个 用 逗号 分 隔 ， 如 : 


十 目 


Vo ser el Sveo oer eer . 
“type”int (11) DEFAULT NULL COMMENT ' 类 型 ”0; 目录 1: 菜单 ”2: 按钮 '， 
“icon”varchar (50) DEFAULT NULL COMMENT ' 菜 单 图标 '， 
order num int(11) DEFAULT NULL COMMENT 2 
“create by” varchar (50) DEFAULT NULL COMMENT ' 创 建 人 '， 
“create time” datetime DEFAULT NULIL COMMENT ' 创 建 时 间 '， 
“last update by” varchar (50) DEFAULT NULL COMMENT ' 更 新 人 ',， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '"， 
“del flag” tinyint (4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=45 DEFAULT CHARSET=utf8 COMMENT=' 菜 单 管理 '; 


4.3.5 用 户 角 色 表 〈sys_user_role) 
用 户 角 人 色 表 是 用 户 和 角色 的 中 间 表 ， 通过 用 户 ID 和 角色 ID 分 别 和 用 户 表 和 角色 表 关 联 。 


CREATE TABLE SYS user role ( 
“id”bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
‘user id. bigint (20) DEFAULT NULL COMMENT ' 用 户 ID', 
“role id. bigint (20) DEFAULT NULL COMMENT ' 角 色 ID'， 
‘Create by varchar (50) DEFAULT NULL COMMENT ' 创 建 人 '， 
“create time” datetime DEFAULT NULIL COMMENT ' 创 建 时 间 '， 
“last update by” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=76 DEFAULT CHARSET=utf8 COMMENT=' 用 户 角 色 '; 


4.3.6 ”角色 菜单 表 (sys_role_menu) 
角色 沫 单 表 是 角色 和 和 沫 单 的 中 间 表 ， 通 过 角色 ID 和 菜单 DD 分别 和 和 角色 表 和 亲 单 表 关 联 。 
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CREATE TABLE SYS role menu  ( 
“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
‘role id ”bigint (20) DEFAULT NULL COMMENT ' 和 角色 ID'， 
“menu id” pbigint(20) DEFAULT NULL COMMENT "菜单 ID'， 
“create by” ”varchar (50) DEFAULT NULL COMMENT ' 创 建 人 '， 
“create time”datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update by varchar(50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=469 DEFAULT CHARSET=utf8 COMMENT=' 角 色 菜 单 '; 


4.3.7 角色 机 构 表 (sys_role_dept) 
角色 机 构 表 是 角色 和 机 构 的 中 间 表 ,通过 角色 ID 和 机 构 ID 分 别 与 角色 表 和 机 构 表 关联 。 


CREATE TABLE SYS role dept ( 
“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“role id. bigint (20) DEFAULT NULL COMMENT ' 和 角色 ID'， 
“dept id ”bigint (20) DEFAULT NULL COMMENT ' 机 构 ID'， 
“create by”varchar (50) DEFAULT NULIL COMMENT ' 创 建 人 '， 
“create time” datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update py” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '"， 
PRIMARY KEY (id-) 
) ENGINE=InnoDB AUTO INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT=' 和 角色 机 构 "'; 


4.3.8 字典 表 (sys_dict) 
字典 表 主 要 存储 系统 第 用 的 枚 举 类 型 数据 ， 主 要 包含 编写、 标签 、 数 据 值 、 类 型 等 字段 。 


CREATE TABLE ‘sys dict™ ( 
“id”bpbigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“value”vVarchar (100) NOT NULL COMMENT ' 数 据 值 '， 
“jabel” varchar (100) NOT NULIL COMMENT ' 标 签名 '， 
“type ”varchar (100) NOT NULL COMMENT ' 类 型 '， 
description varchar(100) NOT NULL COMMENT ' 描 述 "， 
“sort”decimal (10,0) NOT NULL COMMENT "排序 (升序 ) '， 
“create by”varchar(50) DEFAULT NULL COMMENT ' 创 建 人 '， 
“create time”datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update bpy” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
“remarks”varchar (255) DEFAULT NULL COMMENT ' 备 注 信息 '， 
“del flag” tinyint(4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=5 DEFAULT CHARSET=utf8 COMMENT=' 字 — 典 表 '; 
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4.3.9 ”配置 表 (sys_config) 
配置 表 主 要 存储 系统 配置 信息 ， 主 要 包含 编号 、 标 签 、 数 据 值 、 类 型 等 字段 。 


CREATE TABLE SYS config 【 
`“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
“value ”varchar (100) NOT NULL COMMENT ' 数 据 值 "， 
“jabel”varchar (100) NOT NULL COMMENT ' 标 签名 '， 
“type ”varchar (100) NOT NULIL COMMENT ' 类 型 '， 
‘description varchar(100) NOT NULL COMMENT ' 摘 述 '， 
“sort ”decimal (10,0) NOT NULL COMMENT ' 排 序 (升序 ) '， 
‘create by” varchar (50) DEFAULT NULL COMMENT "创建 人 '， 
“create time”datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update by” varchar (50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
“remarks” varchar (255) DEFAULT NULL COMMENT ' 备 注 信息 '， 
“del flag”tinyint (4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 
PRIMARY KEY (“id.) 
) ENGINE=InnoDB AUTO INCREMENT=5 DEFAULT CHARSET=utf8 COMMENT=' 系统 配置 表 '; 


4.3.10 ”操作 日 志 表 (sys_log) 


操作 日 志 表 主要 记录 系统 用 户 的 日 常 操 作 人 信息， 主要 包含 编号 、 用 户 名 、 用 户 操 作 、 请 求 
方法 、 请 求 参数 、 执 行 时 长 、 卫 地 址 等 字段 。 


CREATE TABLE Sys log ( 
“id”bigint(20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 
‘user name. varchar (50) DEFAULT NULL COMMENT ' 用 户 名 '， 
“operation”varchar (50) DEFAULT NULIL COMMENT ' 用 户 操 作 '， 
“method”varchar (200) DEFAULT NULI COMMENT ' 请 求 方法 '， 
“params ”Varchar (5000) DEFAULT NULL COMMENT ' 请 求 参 数 '， 
“time ”bigint (20) NOT NULL COMMENT ' 执 行 时 长 (毫秒 )'， 
“ip” varchar (64) DEFAULT NULL COMMENT 'IP 地 址 '， 
‘create by Varchar (50) DEFAULT NULL COMMENT 1 创建 人 '，， 
create time” datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 
“last update by” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 '， 
“last update time”datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 
PRIMARY KEY (“id.) 

) ENGINE=InnoDB AUTO INCREMENT=2798 DEFAULT CHARSET=utf8 COMMENT=' 系统 操作 日 志 '; 


4.3.11 ”登录 日 志 表 (sys_login_log) 


登录 日 志 表 主要 记录 用 户 登 录 和 退出 状态 ， 主 要 包含 编写、 用户 名 、 登 录 状 态 、IP 地 址 
等 字段 ， 可 以 根据 status 状态 统计 在 线 用 户 信 息 。 
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CREATE TABLE SYS login log ( 

“id”pbigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 

“user name” varchar (50) DEFAULT NULL COMMENT ' 用 户 名 '， 

“status” ”varchar(50) DEFAULT NULL COMMENT 登录 状态 (online :在线 ， 登 录 初 始 状态 ， 方 
便 统 计 在 线 人 数 ; login: 退 出 登录 后 将 online 置 为 login: logout :退出 登录 ) 

"ip varchar(64) DEFAULT NULL COMMENT "IP 地 址 ' ， 

“create _ by” varchar(50) DEFAULT NULL COMMENT ' 创 建 人 '， 

“create time” datetime DEFAULT NULL COMMENT ' 创 建 时 间 '， 

“last update by” varchar(50) DEFAULT NULL COMMENT ' 更 新 人 ',， 

“last update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 

PRIMARY KEY (id.) 
) ENGINE=InnoDB AUTO INCREMENT=2798 DEFAULT CHARSET=utf8 COMMENT=' 系统 登 录 日 志 '; 
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抢 建 开 友 十 谨 


开发 环境 准备 
在 进行 项 目 开发 前 ， 请 安装 以 下 开发 环境 。 


5.1.1 安装 JDK 环境 


Java 基础 开发 工具 和 运行 环境 ， 进 入 后 面 附 注 的 官网 下 载 地 址 ， 根 据 系 统 下 载 对 应 的 版 
本 。 我 们 这 里 选择 Windows 64 系统 的 EXE 安装 版 本 ， 最 好 选择 1.8 以 上 的 版 本 ， 这 里 使 用 
1.8.0_131, 下 载 安装 完成 之 后 再 设置 一 下 坏 境 变 量 就 可 以 了 。 网 上 教程 很 多 ， 这 里 就 不 浪费 篇 
幅 了 ， 下 面 提供 官网 下 载 地 址 和 网 上 提供 的 安装 教程 。 


e 下载 地 址 : https://www.oracle.com/technetwork/java/javase/downloads/index.html 
e 安装 教程 : https://jingyan.baidu.com/article/6dad5075dldc40al23e36ea3.html 


5.1.2 安装 Eclipse 开发 工具 


Eclipse 是 一 球 开 源 的 可 视 化 开发 工具 ， 外 用 OSGI 模块 化 染 构 ， 文 持 插 件 插 拔 ， 
件 开 发 和 扩展 ， 提 供 非常 完善 和 强大 的 功能 ， 还 有 丰富 和 实用 的 插件 可 以 选用 。 这 里 选用 
Eclipse 作为 后 病 开 上 友 IDE, 起 使 用 IDEA 的 请 目 行 租 阅 相关 安 半 教 程 。. 下 面 提 供 官 网 下 载 地址， 
Eclipse 下 载 下 来 无 须 安 装 ， 只 要 有 安装 Java 环境 即 可 运行 。 


e 下 载 地 址 : https://www.eclipse.org/downloads/packages/ 


5.1.3 安装 MySQL 数据 库 

本 系统 采用 MySQL 数据 库 。MySQL 是 一 个 非常 流行 的 开源 关系 型 数据 库 ， 大 家 也 非 第 
熟悉， 网 上 教程 也 多 如 牛 毛 ， 这 里 束 不 再 资 述 了 ， 下 和 面 提供 官网 下 载 地 址 和 网 上 提供 的 安 沪 教 
程 ， 大 家 自行 学 习 安装 。 

MySQL 本 刁 不 提供 可 视 化 的 管理 工具 ， 但 是 市 场 上 有 很 多 免费 的 第 三 方 软件 可 用 ， 比 如 
Navicat for MySQL， 读 者 可 根据 需要 目 行 安 半 需 要 的 党 理工 具 。 
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e 下 载 地 址 : https://dev.mysql.com/downloads/mysql/ 


e 安装 教程 : http://www.runoob.com/mysql/mysql-install.html 


5.1.4 安装 Maven 构建 工具 


本 系统 采用 Maven 进行 项 目 管理 和 打包 。Maven 是 一 个 项 目 管 理 和 综合 工具 。Maven 基 
于 POM 模型 ， 给 开发 人 员 提 供 了 构建 一 个 完整 的 生命 周期 框架 。 开 发 团队 可 以 自动 完成 项 目 
的 基础 工具 建设 ，Maven 使 用 标准 的 目录 结构 和 默认 构建 生命 周期 。 下 面 提供 官网 下 载 地 址 
和 网 上 提供 的 安装 教程 。 


e 下 载 地 址 : http://maven.apache.org/ 
e 安装 教程 : https://www.ylibai.com/maven 


生成 项 目 模板 


登录 Spring Initializr， 输 入 项 目 信 息 ， 生 成 Spring Boot 项 目 模板 ， 保 存 到 本 地 。 网 站 地 址 
为 https:/Wstart.spring.io/， 页 面 如 图 5-1 所 示 。 


SPRING INITIALIZR 


Generatea MavenPrject + With js .+ and Spring Boot 211 


Project Metadata Dependencies 
Artfact coordinares Add Spring 日 DOT starters and dependencies to your application 


Search for dependencies 


Generate Project alt + < 


Don't know what to look for? Want more options? Switch to the full wersion 


导入 Maven 项 目 


解压 下 载 的 ZIP 包 ， 放 置 到 任意 工作 目录 下 。 打 开 Eclipse 开发 工具 , 在 导航 栏 上 右 击 一 
导入 (Import) 一 Exist Maven Project, 根据 提示 选择 解压 的 项 目 目录 , 导入 Maven 项 目 到 Eclipse 
开发 工具 ， 如 图 5-2 所 示 。 
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Import 


Select 
Import Existing Mawven Prolects 


Select an Import wizard: 


| v EE Maven 
EJ] Check out Maven Projec 


了 Install or deploy an artifact to a Maven repository 
,3 Materialize Maven Projects from SCM 
舍 : Qomph 
» E>- Plug-in Development 
EE Remote Systems 
» Ez Rum/Debug 
»” EE Tasks 
舍 ， Team 
》， 车, Web 
» EE Web sernvices 
色 XNMIL 


Finish 
图 5-2 
导入 成 功 之 后 ， 可 以 看 到 项 目 结构 如 图 5-3 所 示 。 


v 全 > mango [mango dev] 
Y 上 国 > src/main/java 
w 名 > com.louis.mango 
》 [i MangoApplication.java 
Y 四 > src/main/resources 
E> static 
EE templates 
BB application.properties 


》 本 > src/test/java 
> i JRE System Library [JavasE-1.8] 
> BB Maven Dependencies 
y》 访 ' > src 
EE target 


= ImVmW 


se| mmvnw,cmd 
;pom.xml 


图 5-3 
(1) pom.xml，Maven 的 配置 文件 。 


<?2xXm| TeTrSsLIoOn= 1 .0” encoding="UTF— 8"?»> 

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.0rg/2001/xXMLSchema—instance™" 

xSsSi:schemaLocation="http://maven.apache.org/POM/4.0.0 

http://maven.apache.org/xsd/maven—-4.0.0.xsd"> 


<modelVersion>4.0.0</modelVersion> 
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<groupId>com.louis</groupId> 
<artifactId>mango</artifactId> 
<version>0.0.1-SNAPSHOT</version> 
<packaging>jar</packaging> 
<name>mango</name> 


<description>Demo project for Spring Boot</description> 


<parent> 
<gqroupId>org.springframework.boot</groupId> 
<artifactIid>spring-boot—starter-—parent</artifactId> 
<Version>2.0.4.RELEASE</version> 
<relativePath/> <1!-- lookup parent from repository 一 一 > 


</parent> 


<properties> 


<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 


<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> 
<java.version>1.8</java.version> 


</properties> 


<dependencies> 

<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-—boot—starter—web</artifactId> 

</dependency> 

<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-lboot-starter-test</artifactId> 
<scope>test</scope> 

</dependency> 


</dependencies> 


<build> 
<plugins> 
<plugin> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot—maven-—plugin</artifactId> 
</plugin> 
</plugins> 
</puild> 


</project> 


(2) application.properties， 一 个 空 的 项 目 配置 文件 。 


境 
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(3) MangoApplication.java，Spring Boot 应 用 局 动 关 。 


QSpringBootApplication 
public class MangoApplication I 


public static Vold main(string[|] args)} 1{ 


SpringApplication.run(MangoApplication.class, args); 


清理 挥 不 需要 的 mvnw、mvnw.cmd 和 test 目录 下 的 测试 文件 。 另 外 , 我 们 这 里 使 用 YAML 
的 配置 格式 ， 所 以 把 application.properties 改 为 application.yml， 清 理 完成 后 项 目 结构 如 图 5-4 


所 示 。 


v EE > mango [mango dev] 
v 四 > src/main/java 
w 名 > com.louis.mango 
» [BB MangoApplication,java 
v 国 | > src/main/resources 
E> static 
EE templates 
忆 application.ymnl 
切 src/test/java 
>» Bl JRE System Library [JavasE-1.8] 
» BN Maven Dependencies 


图 5-4 


. 天 本 有 
| FE 
Wi "a 
J se 全 FA 
mn 性 轩 | 


5.4.1 编 详 打包 
右 击 pom.xml， 选 择 run as 一 maven install， 出 现 如 图 5-5 所 示 的 信息 ， 说 明 编 译 成 功 。 


[INFO] 

[INFO] === spring-boot-maven-plugin:2.1.1.RELEASE:repackage (repackage) 和 mango --- 

[INFO] Replacing main artifact with repackaged archive 

[INFO] 

[INFO] --- maven-install-plugin:2.5.2:install (default-install) 和 mango --- 

[INFO] Installing C:\dev\git\mango\src\mango\target\mango-8@.8.1-SNAPSHOT.jar to C:\Users\5e 
Installing C:\dev\git\mango\src\mango\pom.xml to C:\Users\593018338\.m2\repository\d 


BUILD SUCCESS 


Total time: 13.889 s 
Finished at: 28619-81-11T17:12:374+68:688 


Final Memory: 23M/115M 


图 5-5 


5.4.2 ”启动 应 用 


右 击 MangoApplication.java， 选 择 run as 一 Java Application， 出 现 如 图 $-6 所 示 的 信息 ， 说 
明 局 动 成 功 。 


(v2.1.1.RELEASEY 


7 :B745., INFO 13332 
i:87:45 182 INFO 1i3532 
7 :全 7 :A9. INFO 13532 
7 :B749., INFO 13332 
17:087 :49. INFO 13532 
17:87 4 INFO 13532 
lr :B758., INFQ 135332 
17:@7 58. INFO 13532 
了 7 :六 7 了 ;3 ， INFO 13332 


main] com. louis.mango.MangoApplication starting MangoApplication on G528JLG2E with PID 13532 (CC: 

main|] com.l]ouis.mango.MangoApplication No active profile set, talling back to default profiles: 

main] .5.b.w.embedded., toncat.TomcatWlebserver Tomcat initialized with portrsY: S8888 (http) 

main] o.apache.catalina.core.standardservice starting service [Tomcat] 

main] ore.apache. catalina. core. StandardEnegine starting Servlet Engine: Mpache Tomcat/9.8.13 

main] .3.catalina. core.AprLifecycleListenaer The APR based Apache Tomcat Native library which allows 避 

main] O.a3.c.c.C.[Toncat]. [localhost].[/] initialiring Spring embedded WebApplicationcontext 

main] a.s5.web.context.ContextLoader Ront WebapplicationContext: initialization completed in 4 
O55.CONncurrent. ThreadPoolTaskExecutor Initiaslirine ExecutorService ‘sapplicationTaskExecutor" 

7:B7:31.283 INFO 13332 main| o.5.b.w.embedded. toncat. TomcatHebserver Tomcat starteq | 

17:87:51.292 INFO 13532 main] com.louis.mango.MangoMpplication Started HangoApplication in .33 i (IVM ， running re 

17: 18:31.. INFO 13532 [nio-88868 -ekec-1|] 0.a.C.cC.C.[ Tomcat]. [localhost].[/| Initializing spring Dispatcherservlet ‘dispatcherseryle 

17:18:31.784 INFG 13532 [nic-8688-ekec-1] 0.5.web,.servlet,.DispatcherSservlet Initialiring Serwlet 'dispatcherservwlet" 

17:18:31.,. INFG 13532 [nic-8888-ekec-1] 0.5.web,.servlet.DispatcherServlet tompleted initialization in 16 ms 


图 5-6 


5.4.3 修改 启动 端口 


可 以 通过 修改 application.yml 中 的 配置 属性 修改 应 用 局 动 痕 口 , 默认 是 8080, 比如 这 里 将 
局 动 端 口 修 改 为 8001， 可 在 配置 文件 中 加 入 以 下 配置 : 


SEILVEeI.: 


port: 8001 


重新 局 动 程 序 ， 我 们 看 到 局 动 病 口 已 经 换 成 8001 了 ， 如 图 5-7 所 示 。 


starting MangoApplication on 6626J162E with PID 24246 (C:\dev\git\mango\src' 
No active profile set, falline back to default profiles: default 

Tomcat initialized with port(s): 8881 (http) 

Starting serywice |Tomcat | 

starting Servlet Engine: Apache Tomcat/9.8.13 

The APR based Apache Tomcat Native library which allows optimal performance 
Initializing Spring embedded WebApplicationContext 

Root WebApplicationContext: initialization completed in S214 ms 


Initializine ExecutorService a 


5.4.4 自 定 义 Banner 
Spring Boot 启动 后 会 在 控制 台 输 出 Banner 信息 ,默认 是 显示 Spring 字样 ,如 图 5-8 所 示 。 


| pe 


i PA oot 11 


M19- 17i07i9.174 INFO 13332 --- | | con, Louils. menpgo .MangoMpplicet ilon 
PL T70745.481 THFO 13532 * 【 A |] CO. JOULE .mbnpe .Pangoappl ita len 
2 7 NPQ 13337 -== [ im] Go.%.b.m. Pabedand. tonc at ,Tornmc atiltb eryver 


图 5-8 
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如 果 要 定制 目 己 的 Banner, 只 需要 在 resources 下 放置 一 个 baner.txt 文件 ， 输 入 目 己 的 
banner 字符 即 可 ， 下 面 我 们 修改 mango 的 banner 信息 。 
Banner 字符 可 以 通过 类 似 以 下 网 站 生成 〈 如 图 5-9 所 示 ) : 


e http://patorjk.com/software/taag 


e http://www.network-sclence.de/ascll/ 


ni Ceontrols = *FIGhet and AOL Macro Fonts Tupperted* 
om 
Character Width: 


图 5-9 
复制 字符 到 banner.txt， 并 附 上 应 用 和 版 本 信息 ， 如 图 5-10 所 示 。 


国 banner.bt 器 


11 | Mango Application | Version: 1.8 | 


5-10 


重新 启动 应 用 ， 可 以 看 到 项 目的 Banner 信息 已 经 成 功 替 换 ， 如 图 5-11 所 示 。 


| Mango Application | Version: 1.8 | 


aL9=01=-11 17:26:23.119 INFO 25916 === 
2019-01-11 17:;26:23,.135 INFO 25916 
B19=01=11 17:26:28.465 INFOQ 25916 === 
a19=81=11 17:26:28.497 INFO 25916 
O19=681=11 1l726:28.498 INFO 25916 
19-01-11 17:126:28,.535 INEO 25916 
B19-@1-11 17:2629.876 INFO 25916 
lL9=01=11 17:26:29.077 INFOQ 25916 “= 
2019-681-11 17;26329,.752 INFO 25916 
B19=-01=-11 17:26:30,.567 INFOQ 235916 = 一 = 
2e19=81=11 17:26:30.576 INFO 25916 


eanin] com. louis,. mango.Mamnegoapplication 

Bain] com louis.mango .Mangohpplication 

min] 0.5.b.w,.embedded.tomcat, TomcatWebserver 
Rain] ©.3pache. catalina. core. StandardService 
main] erg.apache.catalina. core,.SstandardeEngine 
ain] 0.8.catalina.core.AprlLifecycleListener 
Bi] 6.B.E.0.C. [Tomeat]. [localhost].[/] 
main] 0.5.web.context.cContextLonder 

i) .5.5.C0Nneurrent.ThreadPoolTaskE Secutor 
min] 0.5.b.w,embedded.tomcat, TomatWebserver 
mBin] cem. louis.mange .MangoApplicatieon 


YY PP PY Nh PY SY PP a 


5-11 
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5.4.5 接口 测试 
启动 应 用 ， 在 浏览 器 中 访问 localhost:8001， 因 为 我 们 还 没有 提供 可 访问 内 容 ， 所 以 显示 
没有 可 映射 访问 的 内 容 ， 稍 后 我 们 添加 接口 进行 测试 ， 如 图 5-12 所 示 。 


< GCG (人 localhost8001 


Whitelabel Error Page 


This application has no explicit mapping for /error, so You are seeing this as a fallback. 


Fri Jan 11 17:34:52 CST 2019 
There was an unexpected error (type=Not Found, status=40). 


No message available 


> 
新 建 一 个 controller 包 ， 并 在 其 下 创建 一 个 HelloController 类 ， 添 加 一 个 hello 接口 ， 如 图 


5-13 所 示 。 


v Ey > mango [mango dev] 
wv EE > src/main/java 
> 人 妇 > com.louis.mango | 
wv 朵 > com.louis.mango.controller 
;|B HelloController.java 
3 > src/malin/resources 
加 src/test/Java 
» Bi JRE System Library [JavaSE-1,8] 
》 Maven Dependencles 
» Es' > src 
E> target 
史 pom.xml 


5-13 


Hellocontroller.java 
QRestcontroller 
Public class HelloController 1{ 


QGetMapping (value="/hello") 
Public Object hello() | 


return "Hello Manogool!l™; 


重新 启动 应 用 ， 在 浏览 器 中 访问 localhost:8001/hello， 可 以 看 到 服务 已 经 调用 成 功 了 ， 如 
图 5-14 所 示 。 


二 GG 四 localhost8001/hello 


Hello Mangol 


5-14 


i 


ss 4 音 


军 0 草 
集 JXSwagger 驻 权 


Spring Boot 作为 当前 最 为 流行 的 Java Web 开发 脚手架 ， 越 来 越 多 的 开发 者 选择 用 其 来 构 
建 企业 级 的 RESTFul API 接口 。 这 些 接口 不 但 会 服务 于 传统 的 Web 端 (B/S， ， 也 会 服务 于 
移动 端 。 在 实际 开发 过 程 中 ， 这 些 接 口 还 要 提供 给 开发 测试 进行 相关 的 日 使 测 试 ， 那么 势必 存 
在 如 何在 多 人 协作 中 共享 和 及 时 更 新 API 开发 接口 文档 的 问题 。 假 如 你 已 经 对 传统 的 WIKI 
文档 共享 方式 所 带 来 的 次 端 深恶痛绝 ， 那 么 不 妨 尝 试 一 下 Swagger2 方式 ， 一 定 会 让 你 有 不 一 
样 的 开发 体验 。 

使 用 Swagger 集成 文档 具有 以 下 几 个 优势 : 


功能 丰富 : 支持 多 种 注解 ， 自 动 生成 接口 文档 界面 ， 支 持 在 界面 测试 API 接口 功能 。 
et poppy 
e 整合 简单 : 通过 添加 pom 依赖 和 简单 配置 ， 内 误 于 应 用 中 就 可 同时 发 布 API 接口 文 
档 界 面 ， 不 需要 部 着 独立 服务 。 
官方 网 站 : https://swagger.io/ 
官方 文档 : https://swagger.io/docs/ 


添加 依赖 


在 pom 文件 内 添加 Maven 依赖 ， 这 里 选择 2.9.2 版 本 。 


pom.xml 
1 —— swagger 一 一 > 
<dependency> 


<groupId>io.springfox</groupId> 
<artifactId>springfox-swagger2</artifactId> 
<version>2.9.2</version> 

</dependency> 

<dependency> 
<gqroupld>io.springfox</grouplId> 


<artifactId>springfox-swagger—ui</artifactId> 


集成 Swagger 文档 


<VeErSsion>?.9.2</versiony> 


</dependency> 


配 症 类 
新 建 config 包 ， 并 在 其 下 添加 Swagger 配置 类 。 


SwaggerConfig.java 


QConfiaguration 
QEnableSwagger2 
public Class SwaggerConfig { 


QBean 
Public Docket createRestApi (}1 
return new 


Docket (DocumentationType .SWAGGER 2}) -aplInto(aplInto(J) ) .select{) 


-Dis {RequestHandlerSelectors.anvy(})} .paths(PathSelectors.any(}j} -buildil}s 
} 


private ApiiInfo aplInto() 1{ 
return new ApilnfoBuilder() .build(); 


外 面 测试 


司 动 应 用 ， 在 浏 贤 器 中 访问 http://localhost:8001/swagger-ui.html#/， 我 们 束 可 以 看 到 
Swagger 的 接口 文档 页 面 了 ， 还 可 以 选择 接口 进行 测试 ， 如 图 6-1 所 示 。 
汪 上 localhost8001 /swagger-ulLhtmles, 


0 


basic-error-controller Basic Error Controller 


hello-controller Hallo controller ~ 


[= Ee ] 


图 6-1 


a 
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单 击 展开 hello 接口 , 单 击 右 侧 的 try it out 一 execute, 发 现 接 口 成 功 运 回 “Hello Mango! ” 
信息 ， 如 图 6-2 所 示 。 


Request URL 
https /localhosts: 001 /hello 
Server response 


Details 


Response body 


图 6-2 
在 后 续 的 开 有 友 过 程 中 ， 我 们 束 可 以 通过 Swagger 来 测试 接口 了 。 
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MyBatis 是 一 秋 优 秀 的 持久 层 框 并 ， 支 持 定 制 化 SQL、 存 储 过 程 以 及 高 级 映射 。MyBatis 
可 以 使 用 简单 的 XML 或 注解 来 配置 和 映射 原生 信息 ， 并 将 接口 和 Java 的 POJOs 映射 成 数据 
库 中 的 记录 。 

e 中 文官 网 : http://www.mybatis.cn/ 

e 参考 教程 : https://www.w3cschool.cn/mybatis/ 


添加 依赖 


Spring Boot 对 于 MyBatis 的 文 持 需要 引入 mybatis-spring-boot-starter 的 依赖 , 修改 pom 文 
件 3 添加 以 下 依赖。 


pom.xml 
I my balis > 
<dependency> 


<groupId>org.mybatis.spring.boot</groupId> 
<artifactId>mybatis—spring-boot-—starter</artifactId> 
<version>1.3.2</version> 

</dependency> 

之 一 一 mysql 一 一 人 

<dependency> 
<groupId>mysql</groupId> 
<artifactId>mysql—connector—java</artifactId> 


</dependency> 
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未 加 配 年 


7.2.1 状 加 MyBatis 配置 


添加 MyBatis 配置 类 ， 配 置 相 关 扫 摘 路 径 ， 包 括 DAO、Model、XML 映射 文件 的 扫 擂 。 


在 config 包 下 新 建 一 个 Mybatis 配置 类 。 
MybatisConfig.java 


QConfiqguration 
QMapperScan ("com.louis.mango.**.dao") // 扫描 DAO 
public class MybatisConfig { 

@Autowired 


private DataSource dataSourcer; 


QBean 

PubBlic SqlSessionFactory sqlSessionFactory(}) throws Exception 1 
SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean(); 
SessionFactory.setDataSource (dataSource).; 
SessionFactory.setTypeAliasesPackage ("com. louis.mango.** model™)});: 


// 扫描 Model 


PathMatchingResourcePatternResolver resolver = New 
PathMatchingResourcePatternResolver () :> 


sessionFactory.setMapperLocations (resolver.getResources ("classpath*:**/ 


sqlmap/* .xml")); // 扫描 映射 文件 


return sessilionFactory.getob ect(); 


7.2.2 闲 加 数据 源 配 置 
打开 应 用 配置 文件 ， 添 加 MySQL 数据 源 连 接 信息 。 
application.yml 
SpIring: 
datasource: 
driverClassName: com.mysdql .jdbc .Driver 
url: jdbc:mysgql://localhost:3306/mango?useUnicode= 


true&tzeroDateTimeBehavior= convertToNull&autoReconnect= 


truegtcharacterEncoding=utf—8 
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USername: root 


password: 1234256 


7.2.3 ”修改 局 动 类 


给 局 动 类 MangoApplication 的 @SpringBootApplication 注解 配置 包 扫 摘 ， 表 示 在 应 用 局 
动 时 自动 扫描 com.louis.mango 包 下 的 内 容 , 当然 Spring Boot 默认 会 扫描 启动 类 包 及 子 包 的 
组 件 , 所 以 如 果 局 动 类 束 是 放 在 com.louis.manego 人 下， 那么 默认 配置 其 实 就 是 com.louis.mango 
了 了 ， 上 所 以 你 会 及 现 我 们 这 里 不 配置 包 扫 朱 ， 其 实 也 是 可 以 成 功 扫 摘 到 组 件 的 。 

MangoApplication.java 
QSpringBootApplication(scanBasePackages={"com.louis.mango™"}) 
public class MangoApplication | 


Public static void main(string[] args) 1 


SpringApplication.run(MangoApplication.class, args); 


生成 MyBatis 模块 


手动 编写 MyBatis 的 Model、DAO、XML 英 射 文件 比较 烦琐 ， 通 名 都 会 通过 一 些 生 成 工 
有 具 来 生成 。MyBatis 官方 也 提供 了 生成 工具 (MyBaits Generator) ， 男 外 还 有 一 些 基 于 官方 基 
础 改进 的 第 三 方 工具 ， 比 如 MyBatis Plus 残 是 国内 提供 的 一 赤 非 营 优 秀 的 开源 工具 , 网 上 相关 
教程 比较 多 ， 这 里 就 不 再 性 述 了 。 这 里 提供 一 些 资料 作为 参考 。 


e Mybatis Generator 官网 : http://www.mybatis.org/generator/index.html 

e Mybatis Generator 教程 : https://blog.csdn.net/testcs dn/article/details/77881776 
e MyBatis Plus 官网 : http://mp.baomidou.com/#/ 

e MyBatis Plus 官网 : http://mp.baomidou.cony#/quick-start 


生成 好 代码 之 后 ， 分 别 将 Domain、DAO、XML 映射 文件 复制 到 相应 的 包 里 ， 如 图 7-1 
所 示 。 


vw 哇 > com.louis.mango.model v 仇 > com.louis.mango.dao w 岂 , > com.louis.mango,sqlmap 
[RB SysConfigjava [BR SysConfigMapper.java 罗 SysConfigMapperxml 
[BR SysDeptjava [RB SysDeptMapperjava 鸣 SysDeptMapperxml 
B SysDictjava [B SysDictMapperjava 鸣 SysDictMapperxml 
IB SysLogjava 国 SysLoginLogMapperjava SysLoginLogMapper.xml 
区 SysLoginLogjava 国 SysLogMapperjava 的 SysLogMapperxml 


[BR SysNMenu.java [B SysMenuMapperjava 态 SysMenuMapperxml 
IB SysRolejava [B SysRoleDeptMapperjava 哆 SysRoleDeptMapper.xml 
[BSysRoleDept.java [B SysRoleMapperjava RSysRoleMapper.xml 
IB SysRoleMenu,java [BB SysRoleMenuMapper.java 六 SysRoleMenuMapperxml 
[A SysUserjava BB SysUserMapperjava SysUserMapper.xml 

》 IB SysUserRhole,java pperj SysUserRolelvlapper 
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打开 生成 的 Mapper， 我 们 可 以 看 到 MyBatis Generator 默认 生成 了 一 些 增 、 删 、 改 、 碍 的 
方法 ， 我 们 可 以 直接 使 用 。 
SysUserMapper.java 


Public interface SysUserMapper I 
int deleteByPrimaryRKey (Long id}; 


int 1nsert(SveaUser record)s 

int insertSselective lSvsUser IECOTGJ) 7 

SySUser selectBvyPrimaryKey (Long id); 

int updateByPrimaryRKeySelective (SysUser record); 


int updateRyPrimarvyRKey (SysUser record}); 


和 Fr 
有 J i | 二 
有 | | = 3 
A @ 图 : 


在 Mapper 中 新 添加 一 个 findAll 方法 ， 用 于 但 询 所 有 的 用 户 信息 。 
SysUserMapper.java 


public interface SysUserMapper 1 
int deleteByPrimaryKey (Long id);} 


1ni insertlSsv aUser TECOrd); 

int insertSelectivelSvesUser Tecord}); 

SYySsUser selectByPrimaryKey (Long id):; 

int updateByPrimaryRKeySelective (SysUser record}); 
int updateByPrimaryRKey (SysUser record); 

/太太 

* 碍 询 全 部 

* @return 


yy 
List<SysUser> findAll()}); 


在 映射 文件 中 添加 一 个 查询 方法 ， 编 写 findAll 的 查询 语句 。 


集成 MyBatis 框架 


SysUserMapper.xml 


<Sselect id="findAll™" resultMap="BaseResultMap"> 
ee 
<include refid="Base Column List™ /> 
from sys user 


=</SeElect> 
然后 编写 用 户 管理 接口 ， 包 人 一 个 findAll 方法 。 


SysUserService.java 


Pumlic inLerface Sv aUseroServiece | 


1 二 去 

* 得 找 所 有 用 户 

* @return 

oh 

List<SysUser> findAll(); 


} 
接着 编写 用 户 管理 实现 类 ， 调 用 SysUserMapper 方法 完成 查询 操作 。 
SysUserServicelmpl.java 

QService 


public class SySsSUserServiceImpl implements SysUserService I 


QAuUutowired 


Private SysUserMapper sysUserMapper; 


QOverride 
Public List<SysUser> findAll()} 1{ 
return sysUserMapper.findAll():; 


然后 编写 用 户 管理 RESTful 接口 ,返回 JSON 数据 格式 ,提供 外 部 调用 。 被 @RestController 
注解 的 接口 控制 器 默认 使 用 JSON 格式 交互 ， 返 回 JSON 结果 。 
SysUserController.Java 


QRestcController 
QRequestMapping ("user") 
public class SysUserController I 
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QAuUutowired 


Private SYSUSeTSeErTVICe SVSUSsSerServicer 


GGetMapping (value="/findAll™) 
Public Object fndAll() | 


return svesUserService.. findAll(}s: 


| | | 
, 
= 1 ! 
上 . i | 
Ss psi | 多 
| 
i | FPF | 志 | 
上. rr N | 和 rr 
y I E mi 


虽然 代码 编写 已 经 完成 , 但 是 此 时 局 动 运行 还 是 会 有 问题 的 ， 因 为 在 编译 打包 的 时 候 , 我 
们 的 XML 映射 文件 是 不 在 灼 认 打包 范围 内 的 ， 所 以 青 要 修改 一 下 打包 资源 配置 。 
修改 pom.xml， 在 build 标签 内 加 入 形式 如 下 的 resource 标 伍 的 打包 配置 ， 这 样 打包 时 束 
会 把 MyBatis 映射 文件 也 复制 过 去 了 。 


pom.xml 


<bulild> 
<plugins> 
<plugin> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-maven-—plugin</artifactId> 
</plugin> 
</plugins> 
<!-- 打包 时 复制 MyBatis 的 映射 文件 --> 
<resources> 
<resource> 
<directory>src/main/java</directory> 
<lincludes> 
<include>** /sqlmap/*.xml</include> 
</includes> 
<filtering>false</filtering> 
</resource> 
<resource> 
<directory>src/main/resources</directory> 
<1ncludes> 
<include>**/*.*</include> 
</includes> 


<filtering>true</filtering> 
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</Iesourcey> 
</resources> 


</buildy> 


编译 并 局 动 应 用 ， 访 问 http://localhost:8001/user/findAll， 可 以 看 到 查询 接口 成 功 返 回 了 所 
有 用 忆 信 息 ， 如 图 7-2 所 示 。 


€ GC OD localhost8001/user/findAIl 


[fid”: 1, “name” :“ admin", “nicklNHame”: “超级 管理 

RY, atar :mll, password : 9eco9750e709d31dad22365cahbc5c625d482e57dc7dadaebba7rdd02tl129edc 
dmin’ , createTinme : 2018-08-14T03:11: 11.000+0000 ”1astUpdateBHy :admnin’, lastlUpdateTime” :” 
备 ”,” avatar” :rmmll, password “3eo837Tc7Tled701380 允 da296e 电 cle3ldlad7ycl7Tefe5cod87ea7el6eder 
dmin ,createTim": 2019-09-23T11: 43: 00.000+0000”,*lastthdateBy :adhin" "lastlpdateTime” :* 
EE, aratar :nll, password : T7388dalb7988173de33cdi0023e72b049felBBfd59658eb0829bc92bi2fe 
drmanm , createTime : 2018-09-23T11:43: 44.00040000”,"lastthdateBy :admin’, lastUpdateTime :” 
高 ", "avatar” DLL "password’: 03598a9 dca0l 75b9652267a475b7bd49a599a35bb25c5830e3d02c460f3 杆 
danm , createTim :2019-09-23T11: 44: 23.00040000",*lasttPdateby : adtnin’, lastUpdateTime :” 
操 ” ”aratar” :mll, password”: "1759880c5a2eadd9f Tdbdf5e7ad2152cadf 831cd45c0dlf32af0e939eebgd: 
dmin’,” createTime”: 2018-09-23T11: 45: 32.000+0000”, “lastthdateby”: "adnin’, "lastlpdateTime” :* 


图 7-2 


当然 也 可 以 用 Swagger 进行 测试 ， 特 别 是 要 发 送 POST 请 求 的 时 候 ， 测 试 起 来 非 第 方便 ， 
如 图 7-3 所 示 。 


Request URL 


http:/ /Localhost:B00l user /findALl 
Server response 


Code Details 


Response body 
"nickNasme": "起 级 管 理 吕 "， 


“Svatar™s mll, 
esswornd": "ecgrogereg3ldad223605c8bcsc625462eSTA4AcT aadoebbarddo2f1l129ed4celd", 
囊 而 Ut" “YiCcm INvbXNocrsrddate”,. 

email": "hiaineag.com", 

"mobile™"s "13612345678", 

时 二 此 商 攻 "2 了 

二 EGtld": #4, 

-ErteBy™: "dmin”, 

EreateTine": "2818-88-14T163:11:1]1 .G600+88668", 
"LastUpdateBy": "dmin®, 

"LastUpdateTine"s "2018=68=14T163:11:11 .660848666896"., 
delkFlae"s 9 


"id": 22, 
name" Tube™, 
pickMName" < "Me" , 


图 7-3 
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数据 库 连 接 池 人 负 贡 分 配 、 官 理 和 释放 数据 库 连 接 , 它 允 许 应 用 程序 重复 使 用 一 个 现 有 的 数 
据 库 连接 ,而 不 是 册 重 新 建立 一 个 , 释放 空 几 时 间 超 过 最 大 空 内 时 间 的 数据 库 连 接 来 避 倪 因为 
没有 释放 数据 库 连 接 而 引起 的 数据 库 连 接 遗漏 .通过 数据 库 连 接 池 能 明显 提高 对 数据 库 操作 的 
性 能 。 在 Java 应 用 程序 开 肥 中 ， 币 用 的 连接 凶 有 DBCP、C3P0、Proxool 等。 

Spring Boot 默认 提供 了 香干 种 可 用 的 连接 池 , 默认 的 数据 源 是 org.apache.tomecat.jdbc.pool. 
DataSource。Druid 是 阿里 系 提供 的 一 个 开源 连接 闻 ， 际 在 连接 池 之 外 ， 还 提供 了 非 汕 优秀 的 
数据 库 监控 和 扩展 功能 。 在 此 ， 根 据 项 目 实 践 中 的 应 用 ， 讲 解 如 何 实现 Spring Boot 与 Dmid 
连接 池 的 集成 。 


Druid 介绍 


Druid 是 阿里 开源 的 一 个 JDBC 应 用 组 件 ， 其 主要 包括 3 部 分 : 


e DruidDriver: 代理 Driver， 能 够 提供 基于 Filter - Chain 模式 的 播 件 体系 。 

e DruidDataSource: 高 效 可 党 理 的 数据 库 连 接 池 。 

e SQLParser: 实用 的 SQL 语法 分 析 。 

通过 Druid 连接 池 中 间 件 ， 我 们 可 以 实现 : 

e@ 监 oe 问 性 能 。 Druid 内 置 了 一 个 功能 强大 的 StatFilter 插件 , 能 够 详细 统计 SQL 
的 执行 性 能 ， 对 于 线 上 分 析 数 据 库 访问 性 能 有 所 帮助 。 

4 二 括 扫 葬 DBCP 和 C3P0 连接 池 中 间 件 。Druid 提供 了 一 个 高 效 、 功 能 强大 、 可 扩展 
性 好 的 数据 库 连 接 池 ， 

e 数据 库 密码 加 密 。 直接 把 数据 库 密码 写 在 配置 文件 中 , 容易 导致 安全 问题 。DruidDriver 
和 DruidDataSource 都 支持 PasswordCallback。 

e SQL 执行 日 志 。Druid 提供 了 不 同 的 LogFilter， 能 够 支持 Common-Logging、Log4j 和 
JdkLog， 你 可 以 按 需 要 选择 相应 的 LogFilter， 监 控 你 应 用 的 数据 库 访问 情况 。 

e。 扩展 JDBC。 如 果 对 JDBC 层 有 编程 的 需求 ， 可 以 通过 Druid 提供 的 Filter-Chain 机 制 
很 方便 地 编写 JDBC 层 的 扩展 插件 。 


更 多 详细 信息 可 参考 官方 文档 ，https://github.conyalibaba/druid/wiki。 
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添加 依赖 


在 pom 文件 中 添加 Druid 相关 的 maven 依赖 。 


pom.xml 
A ee 
<dependency> 


<gqroupId>com.alibaba</groupId> 
<artifactId>druid—spring-boot—starter</artifactId> 
<Version>1.1.10</version> 


</dependency> 


Druid Spring Boot Starter 是 阿里 官方 提供 的 Spring Boot 插件 ， 用 于 帮助 在 Spring Boot 
项 目 中 轻松 集成 Druid 数据 库 连 接 池 和 监控 。 
更 多 资料 可 以 参考 ; 


es Drud: https://eithub.com/alibaba/druid 
es Dud Spring Starter: https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter 


添加 配置 
修改 配置 文件 ， 把 原 有 的 数据 源 配置 替换 成 Druid 数据 源 并 配置 数据 源 相关 参数 。 


application.yml 


SpIring: 
datasource: 
name: druidDataSsource 
type: com.alibaba.druijd.pool .DruidDataSource 
druid: 
driver—class-—name: com.mysgql .dbc.Driver 
url: jdbc:mysql://localhost:3306/mango?useUnicode= 
truetzeroDateTimeBehavior=convertToNullt&tautoReconnect=true&tcharacterEncoding= 
ut 二 一 8 


username: IrIoot 

password: 1234J6 

filters: statwall, log41, Contiidg 
max—active: 100 


i1nitial—size: 1 
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max—wait: 60000 

min—idle: 1 
time-—-between—eviction—runs—millis: 60000 
min—evictable—idle—time—millis: 300000 
alidaltion querv: seleckE x 

EesE=while Tdle: FruUe 

test— on borrow: false 

Eest=on return: false 
Pool-prepared—statements: true 
max—open—prepared—statements: 0 


max—pool-prepared—statement—per—-connection—size: 20 
参数 说 明 


e spring.datasource.druid.max-active: 了 最 大 连接 数 。 

e spring.datasource.druid.initial-size: 初始 化 大 小 。 

e spring.datasource.druid.min-idle: 最 小 连接 数 . 

e spring.datasource.druid.max-wait: 获取 连接 等 待 超时 时 间 。 

e spring.datasource.druid.time-between-eviction-runs-millis: 间隔 多 久 才 进行 一 次 检测 ， 检 
测 需 要 关闭 的 空闲 连接 ， 单 位 是 毫秒 。 

e spring.datasource.druid.min-evictable-idle-time-millis: 一 个 连接 在 池 中 最 小 生存 的 时 间 ， 
单位 是 毫秒 。 

e spring.datasource.druid.filters=config,stat,wall,log4j: 配置 监控 统计 拦截 的 filters， 去 掉 后 
监控 界面 SQL 无 法 进行 统计 ，wall 用 于 防火 墙 。 


Drid 提供 了 几 种 Filter 信息 ， 如 表 8-1 所 示 。 
表 8-1 Druid 提供 的 几 种 Filter 信息 


com.alibaba.druid .filter.stat. StatFilter 
com.alibaba.druid .filter.stat. StatFilter 


mergestat com.alibaba.druid .filter.stat. MergeStatF1lter 


com.alibaba.druid.filter.encoding.EncodineConvertFilter 


log4] com.alibaba.druid.filter.logging.Log4]Filter 
log4]2 com.alibaba.druid.filter.logeging.Log4]2F1lter 
slt4] com.alibaba.druid.filter.logeineg.Slt4}LogFilter 


commonloeeing com.alibaba.druid.filter.logeing.CommonsLogFilter 


com.alibaba.druid.wall. WallFilter 


如 果 需 要 通过 定制 的 配置 文件 对 Druid 进行 自 定义 属性 配置 ， 添 加 配置 类 如 下 : 
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DruidDataSourceProperties.java 


QConfigurationproperties (prefix = "spring.datasource.druid™) 
Public class DruidDataSourceProperties 1{ 
// jdbc 


private String driverClassName; 


private 
private 
private 
// jdbc 
private 
private 
private 


private 


String url; 

String Usernames; 
String password; 
connection pool 

int initialSizer 

int minldle; 

int maxActive = 100; 


lJ]ong maxWait; 


private long tjmeBetweenEvictionRunsMillis; 

private long minEvictableldleTimeMill1lis; 

private String validationmQuery;s 

private boolean testWhileldler 

private boolean testOnBorrow; 

private boolean testoOnReturn; 

private boolean poolPreparedSstatements,; 

private int maxPoolPreparedStatementPerCconnectionSize; 
// filter 


private String filterss 


// 此 处 省 略 getter 和 setter 
Druid Spring Starter 向 化 了 很 多 配置 , 如 果 默 认 配 置 满 足 不 了 你 的 需求 , 可 以 目 定 义 配置 。 
更 多 配置 参考 如 下 : 


Druld Spring Starter: https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter 


本 0c 曾 Servlet 和 Filter 
在 config 包 下 新 建 一 个 DruidConfig 配置 关 ， 主 要 是 注入 属性 和 配置 连接 池 相 关 的 配置 ， 
如 黑 白 名 单 、 监 控 管 理 后 台 登 录 账 己 密 码 等 ， 内 容 如 下 : 
DruidConfig.java 


QConfiguration 


QEnableConfigurationPproperties({DruidDataSourceProperties.class}) 
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public class DruidConfig f 
GAutowired 


private DruidDataSourceProperties properties; 


QBean 

QConditionalOnMissingBean 

Public DataSource druidDataSource()} I 
// 中 间 省 略 属性 设置 


return druidDataSource:; 


/** 注册 servlet 信息 ， 配置 监控 视图 */ 
GBean 
QConditionalOnMissingBean 
public ServiletRegistrationBean<Servilet> druidServiet() 1 
ServletRegistrationBean<Servlet> servletRegistrationBean = new 
ServletReglistrationBean<Servlet> (new StatViewServilet(}, 
id) 
/ /日 名 单 
ServletReglstrationBean.addlnitParameter("allow", 
了 
// IP 黑 名 单 (存在 共同 时 ，deny 优先 于 allow) : 
// 如 果 满 足 deny 的 话 提示 :Sorry, YOU are not permitted to view this page. 
ServietRegqistrationBRean.addIinitParameter{"deny , 11972.168.1.119™"). 
/ /登录 查看 信息 的 账号 密码 ， 用 于 登录 Druid 监控 后 台 
serviletRegqistrationBean.addIinitParameter(" logogoinUsername"yr admin ): 
serviletRegqistrationBean.addIinitParameter("loginPassword", "admin™}); 
/ /是否 能 够 重 置 数据 
ServiletReqistrationBean.addIinitParameter{(" resetEnable™, "true™}); 


return servietRegistrationBean; 


/** 注册 Filter 信息 ， 监 控 拦 截 器 */ 
QBean 
QConditionalOnMissingBean 


Public FilterRegistrationBean<Filter> filterRegistrationBean(}) I 


// 省 略 具 体 注册 逻辑 


代码 说 明 : 
e (@DEnableConfigurationProperties 注解 用 于 导入 上 一 步 Dmid 的 配置 信息 。 
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e public ServletRegistrationBean druidServlet() 相当 于 Web Servlet 配置 。 
e public FilterRegistrationBean filterRegistrationBean() 相当 于 Web Filter 配置 。 


8.5 


编译 局 动 应 用 ， 友 现 局 动 出 错 了 ， 


所 示 。 


EaUSed lr: 
二 让 


编译 运行 


ove. lang. Moc loessDet eilrror: erg epeche/ Lop]iPriority 
java lang. Cless. fortdemeel iative Pethad) =[nsll,.B® 131] 
lang. CCl. Torlmmelt lass. Pra: 26a) m=[ia:1..@ i314] 


t com Bibebe. Graid ,veil tils, lopdc osstued ly, dmv 40 =s[eruid-1,. .0. jor:1.1. 20] 


com. libebe.draid, filter.Filterpunager., ledFilver(Filtert sager, gyaills) “(druld-1.1.10. jaril.1.10)] 

Bam Llibabe. dald. peal .DruldAbytraerloataeure. pe Bn) =[ drulds1.1.140. farsi.1.168] 
com, Sibabe. draild, pool .Cruldibytractleterur cece, sethilterslCru ; ve 1) = [druld-1.1. 0 jer:l.1;10] 
Co Louils ,Bonge. contipeCruldcontig. drulaytasourcelDr uld ent ip,; Ee 5 {classes/ins) 

Bam Leuls Bone . Config. DruldContigtsEnhae rly Sp ingttL I Se .CH IbSdraldlavn esi ignerotedy) =[elasuesl :nal] 
Con, lowly , monge. eonfig.Cruldoenf lestenheeertySpr inge OL Toft st le ypr ig LOSTeffl?, lnkel etrer yt 


Org seringframework cplib. prowy MethodPremy, invekesuper(MethodProwy, ay! 24) =[sprimg-core-S: .3 NELEASE, jaris:1.3,REL 
BPE EL ot tn Conf Luro nt lsat dt pt itereept ton i eo assEn 
tt com, louly, mongo.config.Cruldconf lesS EnheeerbySpr ineCOL ToSbe. druldOatasourcel cBener steds) =[clhyyes :ng] 


CauUsed Br 
十 下 
时 二 
三 让 
而 和 


国 本 而 


SUnNareflect. MetiveMethedic cessr Len, meked([ lstive Methed) “|[narls:s 131] 

Bue Mr ed Er La]. Lmwele( Mativemethodieesssor FT 2) se 二 .和 雪 . 全 二 35] 

Bun ,ref lect. belegst lng ethodheressar Lnpl. dnakel | 1 ] 

jeve. lang. reflect. Method. invokeltHethod, ly:a56) =[nall.B.@ 131) 

GPE Er bs Ut .le ltintlat nd tot .Lno tlt 
ses BE Cem ra ddd 


jv na CEssh tr ent orh. pbche, Loptj.Priority 
UAL L311] 
vs ang GLEeilider. Londe lastt te lakiLosder, vi: did) [nmsl.hm Ly] 

ET 机 ET 全 IT Mn 1 5 “mn 1 
lL 

Wm teemon frogmas cailtted 


图 8-1 


1. 添加 log4j 依赖 
在 pom 文件 中 添加 log4 依赖 ， 最 新 版 本 是 1.2.17。 


pom.xml 
1 = |ogd4y = 
<dependency> 


全 


<groupId>log4]j]</groupId> 


<artifactId>1log4j</artifactId> 


<VETSIONS>] .2.17</versiony 


</dependency> 
2. 添加 log4j 配置 
在 resources 目录 下 ， 新 建 一 个 log4j 参数 配置 文件 ， 并 输入 如 下 内 容 


log4].prop 


### set log 


1oo4d] .rootLogger = INFO,DEBUG, console, inioFijlje, errorFile ,debugfile,mall 


ertles 


lewvels #t## 


LocationIinfo=true 


根据 报错 信息 提示 ， 友 现 缺 了 log 和 的 依赖 ， 如 图 8-1 
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log4] .appender.console = DOIG-apache -1 og4] .ConsoTLeAppemnaeT 


log4] .appender.console.Target = SYStem -OU 


1o09g94] .appender.console.lavyout = org.apache.1o0g4] .PatternLayout 


log4] .appender.console.layout.ConversionPattern =[%d{yyyY—MM—dd 
HH:mm:ss, SSS}]— [$Y%p]| :Sm 后 买 ”等 叫 


log4] .appender.infoFile = org.apache.1o09g4].DailyRollingFileAppender 
1og4] .appender.iniforFile.Threshold = INFO 

log4j .appender.infoFile.File = C:/logs/log 

log4] .appender.infoFile.DatePattern = ”“。 YYYY-MM-ad .1og' 

lo0g4] .appender.inftoFile.Append=true 

lo0g4] .appender.infoFile.lavyout = org.apache.1og4] .PatternLayout 
1og4] .appender.inftoFile.layout.ConverslionPattern =[%d{vyyyy—MM—dd 
HH:mm:ss,SSS}|]—[%p| :gm $x $n 


log4] .appender.errorFile = org.apache.1og4] .DailyRollingFileAppender 
1og4] .appender.errorFile.Threshold = ERROR 

1og4] .appender.errorFile.File = C:/1logs/error 

loog4] .appender.errorFile.DatePattern = "TT. YYyYYY MM-—dd" .log' 

1og4] .appender.errorFile.Append—true 

log4] .appender.errorFile.lavyout = org.apache.1og4] .PatternLayout 
log4] .appender.errorFile.layout.ConversionPattern =[%d{yyyy—MM-—dd 
HH:=:mm:ss,SSS}1 一 人生 PP :$m $x $n 


配置 完成 后 ， 重 新 编译 月 动 ， 友 现 已 经 可 以 局 动 了 。 


)。 品 。 查 看 监控 


8.6.1 登录 青 面 


启动 应 用 ， 访 问 http://localhost:8001/druid/login.html， 进 入 Dmid 监 控 后 台 页 面 ， 如 图 8-2 
所 示 。 


声 Lr DD localhostBo0l /druid/login.html 


Login 


用 户 各 


| 


图 8-2 
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8.6.2 监控 首页 


用 户 名 就 是 在 DruidConfig 配置 的 登录 账号 和 密码 ， 这 里 的 配置 是 “用 户 名 : admin”“ 密 
码 : admin”， 输 入 信息 登录 之 后 ，Druid 后 台 的 管理 首页 如 图 8-3 所 示 。 


0) localhvostB001 ,drmd/inader tn 


Druld Monitor | lm 


Stat Index 查看 JSON API 


人 


cer Megl 本 bc Driver 
Lom llaba 二 ia 用 DC 人 CCC 
ee Raba Wad TO DUO 


| 


性 
I 


Ei Mert TN Gd Sr VA 


ci 


wervgi mange st mi a ls 


图 8-3 


8.6.3 ”数据 产 
数据 源 页 显示 连接 数据 源 的 相关 信息 ， 如 图 8-4 所 示 。 


Druld Monitor 首页 | 数据 源 SQIl 监 浴 SQL 访 火 壤 Web 应 用 URI 监 入 


DataSourceStat List View JSON API 


DataSource25916650 


Basic Info For DataSource-25916650View JSON API 


root 


| a 


essON 旺 入 sDfing 芝 和 尝 


jabe mysqUnocalost: O06 ?useUnicode=trues reroDate TimeBenavion=conmvel 


mysql 


Com mysql jdbe Driver 


com.albaba.druid .fiter stat. StatF Ma, com.allbaba. guld wall WalF Re com._aibabea. 


图 8-4 


8.6.4 SQL 监控 


访问 http://localhost:8001/user/findAll， 如 图 8-$ 所 示 。 接 口 调用 成 功 之 后 ， 可 以 看 到 SQL 
监控 的 执行 记录 ， 可 以 查看 和 分 析 执 行 的 SQL 性 能 ， 方 便 进 行 数 据 库 性 能 优化 。 
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Jruld Monitor 首页 败 所 天 SOLEE 桂 SOL 防 火 培 ”Web 应 用 。 URI 监 注 Session 监 注 spring 蓝 给。 JSON API 了 悦 


SQL Stat View JSON API 


四 总 由 吨 | 司 多 050 0 [S00000 


wd Fup, Fe rev abbr pusgveend Ealt worl mrebsbe tatua, dope idl eneate by 
reatbe bre ladt update by, last updaue time, del flag 


drom sy _user 


图 8-5 


除 此 之 外 ，Druid 监控 礼 理 后 全 还 有 URI 监控 、SQL 防火 场 、Session 监控 等 多 种 多 样 的 
功能 ， 这 里 就 不 浪费 篇 章 进行 介绍 了 ， 有 兴趣 的 可 以 自行 学 习 探 索 。 相 关 链 接 如 下 : 


e https://github.com/alibaba/druid/wiki 
e https://eithub.com/alibaba/druid/tree/master/druid-spring-boot-starter 
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号 或 通 | 大 万 茶 


什么 是 路 域 


为 了 保证 浏 贤 右 的 安全 , 不 同 源 的 客 己 痛 脚 本 在 没有 明确 授权 的 情况 下 , 不 能 读 写 对 方 次 
这 叫 作 同 源 策略 ， 同 源 策略 是 浏览 器 安全 的 基石 

如 条 一 个 请 求 地 址 里 面 的 协议 、 域 名 和 交口 号 都 相同 ， 融 属于 同 源 。 

举 个 例 于 ， 判 断 下 面 URL 是 否 和 http://www.a.com/a/a.html 同 源 : 


本 
党 
和 电 
GB 


e http://www.a.com/b/b.html， 同 源 。 

e http://www.b.comy/a/a.html， 不 同 源 ， 域 名 不 相同 。 

e https://www.a.com/b/b.html， 不 同 源 ， 协 议 不 相同 。 

e http://www.a.com:8080/b/b.html， 不 同 源 ， 端 口号 不 相同 ，。 

依据 浏 贞 吾 同 源 宋 略 ， 非 同 产 脚本 不 可 操作 其 他 源 下 面 的 对 象 , 想 要 操作 其 他 源 下 的 对 象 
台南 要 品 玛 。 综 上 上 所 述 ， 在 同 源 案 略 的 限制 下 ， 非 同 源 的 网 站 之 间 不 能 及 达 AJAX 请 求 。 如 
有 需要 ， 可 通过 降 域 或 其 他 扩 术 实现 。 


CORS 技术 


为 了 解决 浏 宛 右 器 域 回 题 ，W3C 提出 了 时 源 资源 共 圣 方案 ， 即 CORS (Cross-Origin 
Resource Sharimg) 。 

CORS 可 以 在 不 破坏 即 有 规则 的 情况 下 , 通过 后 靖 服 务 器 实现 CORS 接口 ， 从 而 实现 路 域 
通信 。CORS 将 请 求 分 为 两 类 : 简单 请 求 和 非 简单 请 求 ， 分 别 对 跨 域 通信 提供 了 支持 。 


9.2.1 简单 请 求 
在 CORS 出 现 前 ， 发 送 HTTP 请 求 时 在 头 信息 中 不 能 包含 任何 自 定 义 字段 ， 且 HTTP 信 
息 不 超过 以 下 几 个 字段 : 
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@ Accept 
® Accept-Laneuage 
© Content-Laneuage 
e Last-Event-ID 
e Content-Typel 仅 限于 [application/xXx-www-form-urlencoded、 multipart/form-data text/plain| 
类 型 ) 
一 个 钠 单 请 求 的 例子 : 
GET /test HTTPB/T.1 
Accept: */* 
Accept—Encoding: gzZip, deflate, sdch, br 


Origin: http://www.test.com 


Host: www.test.com 


对 于 简单 请 求 , CORS 的 宵 略 是 请 求 时 在 请 求 头 中 增加 一 个 Origin 字段 ， 服务 器 收 到 请 求 
后 ， 根 据 该 字段 判断 是 否 允 许 该 请 求 访问 。 

e 如 果 允 许 ， 就 在 HTTP 头 信息 中 添加 Access-Control-Allow-Origin 字段 ， 并 返回 正确 的 

e@ 如 果 不 允 许 ， 就 不 在 HTTP 头 信息 中 添加 Access-Control-Allow-Origin 字段 。 


除了 上 面 提 到 的 Access-Control-Allow-Origin， 还 有 几 个 字段 用 于 摘 述 CORS 返回 结果 : 


e Access-Control-Allow-Credentials: 可 选 ， 用 尸 是 否 可 以 发 送 、 处 理 cookie。 

e Access-Control-Expose-Headers: 可 选 ， 可 以 让 用 户 拿 到 的 字段 。 有 几 个 字段 无 论 设 置 
与 否 都 可 以 拿 到 的 ， 包 括 Cache-Control、Content-Laneuage、Content-Type、Expires、 
Last-Modified、Praema.。 


9.2.2 非 简 单 请 求 

对 于 非 简单 请 求 的 跨 源 请 求 ， 浏 览 器 会 在 真实 请 求 发 出 前 增加 一 次 OPTION 请 求 ， 称 为 
预 检 请 求 (preflight request) 。 预 检 请 求 将 真实 请 求 的 信息 ， 包 括 请 求 方法 、 自 定义 头 字 段 、 
源 信息 添加 到 HTTP 头 信息 字段 中 ， 询 问 服务 器 是 否 人 允许 这 样 的 操作 。 

例如 一 个 GET 请 求 : 


OPTIONS /test HTTP/1.1 

Origin: http://www.test.com 
Access—Control—Request—Method: GET 
Access—Control—Request—Headers: X—Custom Header 


Host: www.test.com 


与 CORS 相关 的 字段 有 : 
e。 请 求 使 用 的 HTTP 方法 Access-Control-Request-Method。 
e 请 求 中 包含 的 自 定 义 头 字段 Access-Control-Request-Headers。 
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服务 占 收 到 请 求 时 ， 需 要 分 别 对 Origin 、Access-Control-Request-Method 、 
Access-Control-Request-Headers 进行 验证 ， 验 证 通过 后 ， 会 在 返回 HTTP 头 信息 中 添加 : 


Access-Control-Allow-Origin: http://www.test.com 
Access—Control-Allow-—Methods: GET, POST, PUT, DELETE 
ACCess—Control-Allow—Headers: XxX—Custom— Header 
AcCcCess— CoOonNntrol—Allow— Credentials: true 


Access-Control-Max—Age: 1i128000 


它们 的 含义 分 别 是 : 


e Access-Control-Allow-Methods: 真实 请 求 允 许 的 方法 。 

e Access-Control-Allow-Headers: 服务 器 允许 使 用 的 字段 。 

e Access-Control-Allow-Credentials: 是 否 允 许 用 户 发 送 、 处 理 cookie。 

e Access-Control-Max-Age: 预 检 请 求 的 有 效 期 ， 单位 为 秒 。 有 效 期 内 ， 不 会 重复 发 送 预 


当 预 检 请 求 退 过 后 ， 浏 帘 占 才 会 及 太 上 实 请 求 到 服务 如 。 这 样 束 实现 了 器 域 帝 源 的 请 求 


访问 。 


CORS 实现 


CORS 的 代码 实现 比较 简单 ， 主 要 是 要 理解 CORS 实现 跨 域 的 原理 和 方式 。 在 config 包 
下 痢 建 一 个 CORS 配置 类 ， 实 现 WebMvcConfigurer 接口 。 


WebMvcConfigurer.java 


QConfiqguration 


Public class CorsConfig implements WebMvcConfiqurer ({ 


QOverride 

PUuBl1iCcC Vvoid addCorsMappings (CorsRegistry registry) I 
registry.addMapping("/**") // 允许 跨 域 访问 的 路 径 
.allowedorigins ("*") // 人 允许 跨 域 访问 的 源 
SallaowedMethodsl "PosT "ET" TTI DEREETENRA 人 有 求 方 法 
.maxAge (168000) // 预 检 间 隔 时 间 
.allowedHeaders ("*") // 允许 头 部 设置 
.allowCredentials (true}; // 是 天 发 送 cookie 


这 样 ， 每 当 客 户 响 及 大 请 求 的 时 候 ， 部 会 在 尖 部 附 上 器 域 信息 ， 束 可 以 支持 器 域 访问 了 。 
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这 一 和 草 帮 ， 我 们 开始 实现 各 个 业务 功能 接口 ， 包括 用 户 官 理 、 机 构 党 理 、 角 色 官 理 、 沫 单 
侣 理 、 字 和 典 千 理 、 系 统 配置 、 操 作 日 六 、 登 录 日 均等 业务 功能 的 实现 。 


工程 结构 规划 


我 们 要 及 用 的 是 微服 务 的 染 构 ， 虽然 现在 我 们 只 有 一 个 工程 , 但 随 看 项 目 越 来 越 大 ， 代 三 
的 可 重用 性 和 可 维护 性 就 会 变 得 越 来 越 难 , 所 以 尽早 对 工程 结构 进行 合理 的 规划 , 对 项 目前 期 
的 开 友 、 后 期 的 扩展 和 维护 都 是 非 第 重要 的 。 

经 过 重新 规划 ， 我 们 的 工程 结构 如 下 : 


e mango-common: 公共 代码 模块 ， 主 要 放置 一 些 工具 类 。 

e mango-core: 核心 业务 代码 模块 ， 主 要 封装 公共 业务 模块 。 

e mango-admin: 后 台 管 理 模块 ， 包 含 用 户 、 角 色 、 菜 单 管理 每 。 

e mango-pom: 聚合 模块 ， 仅 为 简化 打包 ， 一 键 执 行 打包 所 有 模块 。 


10.1.1 mango-admin 
将 原先 mango 工程 更 名 为 mango-admin， 请 齐 循 以 下 步骤 进行 工程 重 构 。 


(1) 天 闭 应用， 在 Eclipse 上 选择 删除 mango 工程 ， 注 意 不 要 人 勺 选 删除 人 磁盘， 如 图 10-1 
所 示 。 


pi 
时 | Delete Resources 


es Are you sure you want to remeve project mango from the workspace! 


ee I 只 是 Eclipse 上 移 除 ， 个 要 勾 选 ， 否则 


Cdewgrtvumangovsrcvmange 全 物理 删 I 除 本 地 工程 
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(2) 找到 工程 所 在 位 置 ， 修 改 mango 工程 名 为 mango-admin， 如 图 10-2 所 示 。 


Narmme Date modified 


mango-admin| | 171172019 16:43 


10-2 


(3) 编辑 pom.xml， 将 需要 和 蔡 换 的 mango 字 付 亚 换 为 mango-admin， 如 图 10-3 所 示 。 


<modelVersicon>4.0.0</modelVersion> 

parent> 
<groupld>org .springframework .boot</groupld> 
<artifactld>spring-boot-starter-parent</artifactlId> 
<VEraion>2.1.1.RELEASE</version> 
<relativePath/> <!-— loolup parent from repos3itory 一 一 > 


pr loulis</groupld> 
<artifactld>mango-adnin</artitactld> 
<Vversion>0.0,.1-SMAPSHOT</version> 
“name ango" est dnd 
Joot</description> 
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(4) 右 击 Eclipse 导航 栏 , 选择 import 一 exist maven project， 重 新 导入 mango-admin 工程 ， 
如 图 10-4 所 示 。 


ww wy mango-admin [mango dev] 


; 切 src/main/java 
》 车 srcrmairyresources 
[ 琶 src/test/java 
了 JRE System Library [JavasE-1.8] 
》 可 Maven Dependencles 
》 Ee' src 
》 其 target 
[ny pom.xml 
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(5) 重 构 包 结 构 ， 将 基础 包 重 构成 com.louis.mango.admin， 以 区 分 不 同 工 程 的 包 ， 如 图 
10-5 所 示 。 


i a mr 


v Ey > mango-admin [mango dev] 


v nd > src/main/Java 

> com.louts.mangoladmin 

> com,louis.mangoladmin.config 

> com.louis.mangoladmin.Fontroller 
> Com.louls.mang 

> com,louis,mangolad 

> com.louis.mangol 

> com.lours.mangoladmin.fervice,Impl 
> com.louts.mangoladmin.Fqlmap 


> 亏 
》 钊 
» 审 
二 
> 圳 
名 
> 时 
二 
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(6) 由 于 重 构 了 包 路 径 ， 但 是 XML 映射 文件 的 内 容 无 法 同步 更 新 ， 要 将 所 有 MYyBatis 
机 XML Pa Mapper 和 Model 的 包 路 人 笃 修 改 为 正确 的 路 任 ， 可 以 通过 将 
“com.louis.mango.” 全 部 上 音 换 为 “com.louis.mango.admin” 进 行 统一 修改 ， 如 图 10-6 所 示 。 


<?xm] VEFSLOme 1.80" encodine=" "UTF-8"?> 
“1IDOCTYPE mapper PUBLIC “=-//mybatis.org//DTD Mapper 3. OEN "http://mybatis.org/dtd/mybatis 


<resulthap id="BoseResuLthap" 
<id column="id” jdbcType="BIG) 
<rFresult column= "value” jdbeType=" VARCHAR i WOGLUE /> 
xresult column="Lobel”" jdbeType= "VARCHAR" property="LabeL” /| 
<result column="type” jdbcType="VARCHAR™” property="type” /> 
<result columns description” jdbcType= "VARCHAR” property=" "description™ /> 
<result column= sort™” jdbcType=" DECINMAL™ property= sort™ /> 
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(7) 将 MangoApplication 改名 为 MangoAdminApplication， 编 译 局 动 应 用 ， 服 务 访 问 正 
利克 成 功 了 ， 如 图 10-7 所 示 。 


1} SWwagger 
basic-error-controller Basic Eror Controer 


sys-user-controller sys User Controller 


ra user /findall findal 


Parameters 


No parameters 
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10.1.2 mango-common 


常量 ， 如 图 10-8 所 示 。 


EY mango-common [mango dev] 
加 src/main/java 


[可 src/mairyresources 


加 src/test/Java 


BN JRE System Library [JavasSE-1,8] 
BB Maven Dependencies 
区 ”SrC 
》 车 target 
[WY pom.xml 
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10.1.3 mango-core 


新 建 一 个 空 的 maven 工程 ， 后 续 放 置 一 些 公共 核心 业务 代码 封装 ， 如 HTTP 交互 格式 封 
装 、 业 务 基 类 封装 和 分 页 工具 封装 等 ， 如 图 10-9 所 示 。 


v Er mango-core [mango dev] 
区 src/mmain/java 
加 src/main/resources 
匡 src/test/java 
》 Bi JRE System Library [JavasE-1.8] 
» Bh Maven Dependencies 
” 区 src 
[Wy pomaaml 
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10.1.4 mango-pom 


为 了 方便 统一 打包 ， 新 建 一 个 mango-pom 工程 ， 如 图 10-10 所 示 。 这 个 工程 依赖 所 有 模 
芯 ， 负 贡 统 一 进行 打包 《不 然 编 译 的 时 候 需 要 逐个 编译 ， 工 程 一 多 很 是 麻烦 ) ， 但 因 我 们 采用 
的 是 微服 务 淋 构 ， 每 个 工程 模块 使 用 的 依赖 版 本 可 能 部 古人 不 一 样 的 ， 所 以 这 里 的 mango-pom 
与 所 有 模块 不 存在 实质 性 的 父子 模块 关系 ， 也 不 由 mango-pom 进行 统一 版 本 和 依赖 管理 ， 只 
是 为 了 便利 打包 ， 


5 > Mango-admin [mango dev] 
sy > Mango-common [mango dev] 


mango-core [mango dev] 
i > mango-pom [mango dev] 
鸣 pom.xml 


图 10-10 


10.1.5 打包 测试 
下 面 进 行 统一 打包 测试 ， 我 们 最 终 南 要 的 效果 是 : 只 要 在 mango-pom 下 的 pom.xml 运行 
打包 束 能 编 详 打包 所 有 模块 。 现 在 各 个 子 模块 部 没有 编译 过 ,模块 加 的 依赖 也 还 没有 加 ， 所 以 
第 一 次 还 击 要 遵 箱 以 下 步 又 进行 操作 : 
(1) 右 击 mango-common 下 的 pom.xml， 执 行 maven 一 人 Run As 一 Maven Install 编 详 打 包 。 
(2) 在 mango-core 下 的 pom.xml 内 添加 mango-common 为 dependency 依赖 ， 然 后 执行 
编译 打包 命令 。 
pom.xml 


<dependency> 
<groupId>com.1louis</groupId> 


<artifactIid>mango—-common</artifactId> 
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<Version>1.0.0</versiony> 


</dependency> 


(3) 在 mango-admin 下 的 pom.xml 内 湛 加 mango-core 为 dependency 依赖 ， 然 后 执行 编 
译 打 包 命 令 。 


pom.xml 


<dependency> 
<groupId>com.louis</grouplId> 
<artifactId>mango-core</artifactId> 
<version>1.0.0</version> 


</dependency> 


(4) 在 mango-pom 下 的 pom.xml 内 添加 以 上 所 有 的 模块 为 modules 依赖 ,然后 执行 编译 
打包 命令 。 


pom.xml 


<modules> 
<module>../mango-admin</module> 
<module>../mango-common</module> 
<module>../mango—-core</module> 


</modules> 
如 果 工 程 出 现 红 又 ， 可 以 党 试 右 击 工程 Maven 一 Update Project 进行 解决 。 
注 意 


以 后 只 要 对 mango-pom 下 的 pom.xml 执行 命令 ， 束 可 以 统一 打包 所 有 模块 了 。 如 末 控 制 
台 输 出 如 下 所 示 的 打包 信息 ， 束 表示 打包 成 功 了 。 


一 
[INFO] Reactor Summary: 


[INEO 

[PE | A 用 及 全 二 SUCCESS | 6.165 SsI| 
EDI 人 下 人 生 下 全 和 有 SUCCESS | 1.032 sl 
[EC To SUCCESS | 1i1.J10r SI| 
LINEFGI mange Pom 0 0 a a a SUCCESS [ 0.0930 sl 
[MPEG 
[INFO] BUILD SUCCESS 

[INFO] 一 -一 -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


[JNFO| Total time: 28.549 s 

[INFO] Finished at: 2019-01-12T1/i:36:46+08:00 

[INFO] Final Memory: 51M/256M 

[INEO] --------------------------------------------------------------- 一 -一 一 -一 -一 
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业务 代码 封装 


为 了 统一 业务 代码 接口 、 保 持 代 码 整洁 、 提 升 代码 性 能 ， 这 里 对 一 些 通用 的 代码 进行 了 统 
一 封 滚 ， 圭 疙 内 容 如 图 10-11 所 示 。 


wr | > Imango-core [mango dev] 
Y 壤 > srd/main/java 
wv 名 > comlouismango,core.exception 
”四 MangoExceptionjava 导 常 信息 封装 
~ 分 > comlouismangocore.http 
， 罗 HtpResultjava HTTP 返 回 结果 封装 
y 其 HttpStatus,java 
v 四 >comlouismango,core.page 
， 上 四 MybatisPageHelper.java 
》 中 pageRequestjava 分 矶 代码 封装 
[RB PageResult.java 
w 了 妇 > com.louis.mango.core.service 
》 [|B CurdServicejava 怠 用 业务 接口 下 
EE src/main/resources 


加 src/test/jJava 


10-11 


10.2.1 通用 CURD 接口 


CurdService 是 对 通用 增 、 删 、 改 、 得 接口 的 封装 ， 统 一 定义 了 包 售 保存、 删除、 批量 删 
除 、 根 据 ID 但 询 和 分 页 查询 方法 ， 一 般 的 业务 Service 接口 会 继承 此 接口 ， 提 供 基 础 增 、 删 、 
改 、 查 服务 ， 这 几 个 接口 能 满足 大 部 分 基础 CURD 业务 的 需求 ， 封 装 详情 参见 代码 注释 。 


CurdService.java 


/二 六 
* 通用 CURD 接口 

* Qauthor Louis 

* QAdate Jan 12, 2019 


public jnterface CurdService<T> I 


/大雪 
* 保存 操作 


* QAparam record 
Eo 


int save(T record):; 


/大 去 
* 删除 操作 
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* param record 


int delete(T record}); 


/ 文 妈 
* 批量 删除 操作 

* param entities 
sy 


int delete (List<T> records).: 


1 二 二 
* 根据 ID 碍 询 
* param id 
二 
T findBRById(Long id)}); 


1 二 去 

* 分 页 查询 

* 这 里 统一 封装 了 分 页 请 求 和 结果 ， 避 免 直接 引入 具体 框架 的 分 页 对 象 ， 

* 如 MyBatis 或 JPA 的 分 页 对 象 从 而 避免 因为 替换 oRM 框架 而 导致 服务 层 、 

* 控制 层 的 分 页 接口 也 需要 变动 的 情况 ， 蔡 换 ORM 框架 也 不 会 影 啊 服务 层 

* 以 上 的 分 页 接口 ， 起 到 了 解 看 的 作用 

* @param pageRequest 目 定义 ， 统 一 分 页 查询 请 求 

* Q@return PageResult 自 定 义 ， 统 一 分 页 查询 结果 
2 

PageResult findpPpage (PageRequest pageRegquest}); 
} 


10.2.2 ”分 页 请 求 封装 
对 分 页 请 求 的 参数 进行 了 统一 封装 ， 传 入 分 页 查询 的 页 码 和 数量 即 可 。 
PageRequest.java 


A 太太 
* 分 页 请 求 
* Qauthor Louis 
* ldate Jan 12, 2019 
A 
PUubIic class PageReoquest { 
1 二 二 
* 当前 页 码 
et 


private int pageNum = 上; 
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/太夫 
* 每 页 数量 

x 

private int pageSize = 10; 
Pe 

* 查询 参数 


private Map<Sstring,: Object> Params = new HashMap<> (1) ; 


// 此 处 省 略 getter 和 setter 


10.2.3 ”分 页 结果 封装 
对 分 页 查询 的 结果 进行 了 统一 封装 ， 结 果 返 回 业务 数据 和 分 页 数据 。 
PageResult.java 


/太太 
* 分 页 返回 结果 
* flauthor Louis 
* ldate Jan 12, 2019 
el 
public class PageResult { 
/去 
* 当前 页 码 
private int pageNum; 
/去 
* 每 页 数量 
private int pageSizes 
/太太 
* 记录 总 数 
Ry 
private long totalSize; 
1 二 去 
* 页 码 总 数 
*/ 
private int totalPagess; 
1 二 二 
* 分 页 数据 
二 


private List<2> content; 


一 
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// 此 处 省 略 getter 和 setter 


10.2.4 分 页 助手 封 交 
对 MyBatis 的 分 页 查询 业务 代码 进行 了 统一 封装 ， 通 过 分 页 助手 可 以 极 大 简化 Service 查 
询 业 务 的 编写 。 


MybatisPageHelper.java 


/** 
* MyBatis 分 页 查询 助手 

* Qauthor Louis 

* ldate Jan 12, 2019 

SE 

Public Class MybatisPageHelper 1{ 


Public static final String findPage = "findPage"s 


/ 芭 雪 

分 页 得 询 ， 约 定 得 询 方法 名 为 “findPage” 

* param pageRequest 分 页 请 求 

* param mapper Dao 对 象 ， MyBatis 的 Mapper 

* flparam args 方法 参数 

= 

public static PageResult findPage (PageReqgquest pageReaquest, Object mapper}) 1({ 


入 


return findPage (pageRequest, mapper, findPage); 


二 去 
* 调用 分 页 插件 进行 分 页 查询 
* Qparam pageRequest 分 页 请 求 
* aparam mapper Dao 对 象 ， MyBatis 的 Mapper 
* Qparam gqueryMethodName 要 分 页 的 查询 方法 名 
* QQparam args 方法 参数 
二 
QSsuppressWarnings (({ "unchecked™", "Tawtypes” }) 
Public static PageResult TindPage (PageRequest pageRequest, Object mapper, 
String queryMethodName, Object - - 。 args) 1{ 
// 设置 分 页 参数 
int pageNum = pageRequest .GetPageNum() : 
int pageSsSize = PadgeRequest .getPageSsSizel(}; 
PageHelper.startPage (pageNum, pageSize); 
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// 利用 反射 调用 查询 方法 
Object result = ReflectionUtils.invoke (mapper, gqueryMethodName, argsj : 
return getPageResult (pageRequest, new Pagelnfo((List}) result}}; 

} 


/大 大 

* 将 分 页 信息 封装 到 统一 的 接口 

* param pageRequest 

* f@param page 

x 

private static PageResult getPageResult (PageRequest pageRequest, 
PageInfo<?> PageInto) 1{ 

PageResult pageResult = new PageResult(); 
PageResult.setPageNum(pagelInfo.getPageNum()); 
pageResult.setPageSsize (pagelnfo.getPagesize ()); 

PageResult.setTotalSsize (pagelInfo.getTotal (})}; 
PageResult.setTotalPages (pagelInfo.getPages (}))}); 
PageResult .setcContent (pageInfo.getList ()); 


return pageResults 


10.2.5 HTTP 结果 封 涛 
对 接口 调用 的 返回 结 末 进行 了 统一 封 闻 ， 方 便 前 痛 或 移动 病 对 退回 结 采 进行 统一 处 理 。 
HttpFesultJava 


PE 
* HTTP 结果 封装 

* @author Louis 

* ldate Jan 12, 2019 

*/ 

Public class HttpResult 1{ 


private int code = 200，; 
prijivate String msg; 


private Object data; 


public static HttpResult error(}) 1{ 
return error (HLLPStatus.SC INTERNAL SERVER ERROR, 


"未 知 腊 第 ， 请 联系 省 理 员 ") ; 


public static HttpResult error(SsString msg} | 
return error(HttpSstatus.SsC INTERNAL SERVER ERROR, msg); 
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} 


public static HitpResult error(int code, String msg} 1{ 
HttpResult I = new HttpResult(); 
rr.SetCode (code)s: 
r.setMsg (msd) ; 
return rs 


} 


Public static HttpResult ok(String msg) 1 
HttpResult I = new HttpResult 1() > 
r.setMsg (msd) ; 
return rr 


} 


public static HttpResult ok{ObjJect data)} 1 
HttpResult I = new HttpResult (); 
r.setData(data),; 
reLurn Tr? 


) 


public static HttpResult ok(} { 
return new HttpResult().; 
} 


// 此 处 省 略 getter 和 setter 


VY。 ”MyBatis 分 页 查询 


使 用 MyBatis 时 ， 节 头痛 的 束 是 与 分 页 ， 笛 要 先 与 一 个 得 询 count 的 select 语句 ， 再 与 一 
个 真正 分 页 查询 的 语句 , 当 查 询 条 件 多 了 之 后 ,就 会 发 现 真 不 想 花 双 倍 的 时 间 写 count 和 select。 
羊 好 我 们 有 pagehelper po pagehelper 是 一 个 强大 实用 的 MyBatis 分 页 插件 ， 可 以 帮 
助 我 们 快速 地 实现 分 页 功能 。 那 么 ， 接 下 来 我 们 就 一 起 来 体验 一 下 吧 。 


10.3.1 湛 加 依赖 

在 mango-core 下 的 pom.xml 文件 内 添加 分 页 插件 依赖 包 ， 因 为 mango-admin 模块 依赖 
mango-core 模块 ， 所 以 mango-admin 模块 也 能 获取 分 页 插件 依赖 ， 这 了 驶 是 Maven 管理 依赖 的 
好 处 。 
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pom.xml 
Ee 
<dependency> 


<groupId>com.github.pagehelper</grouplId> 
<artifactId>pagehelper-spring-boot-starter</artifactId> 
<Version>l1 .2.5</version> 


</dependency> 


10.3.2 ” 状 加 配置 
在 mango-admin 配置 文件 内 深 加 分 页 插件 配置 。 
application.yml 


# pagehelper 

pagehelper: 
helperDialect: mysql 
reasonable: true 
supportMethodsArguments: true 


params: count=countSsql 


10.3.3 分 页 代码 
首先 ， 我 们 在 DAO 层 添加 一 个 分 页 查询 方法 。 
SysUserMapper.java 


/大 
* 分 页 查询 
* QAreturn 
2 
List<SysUser> findPage (); 

给 SysUserMapper.xml 添加 查询 方法 ， 这 是 一 个 普通 的 查找 全 部 记录 的 查询 语句 ， 并 不 
南 要 与 分 页 SQL， 分 册 插 件 会 拦截 得 询 请 求 ， 并 谈 取 前 台 传 来 的 分 页 但 询 参数 车 新 生成 分 幢 
但 询 语句 。 


SysUserMapper.xml 


<select id="findPage” resultMap—" "BaseResultMap”"> 
Se 
<include refid="Base Column List™ /> 
from sys user 


</select> 


服务 层 调 用 DAO 层 完 成 分 页 得 询 ， 让 SysUserService 继承 CurdService 接口 。 
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SysUserService.java 
PuBlic interface SVSUserService extends CurdoService<SovyesUser> | 


1 二 
* 但 找 所 有 用 忆 


* Q@return 
ok 
List<SysUser> findaAll(}); 


在 实现 类 中 编写 分 页 三 询 业 务实 现 , 我 们 可 以 看 到 ,经 过 对 分 页 但 询 业 务 的 封装 ， 普通 分 
页 得 询 非 芝 简单， 只 需 调 用 MybatisPageHelper.findPage(pageRequest, sysUserMapper) 一 行 代 人 码 
印 可 完成 分 页 得 询 功能 。 


SysUserServicelmpl.jjava 


QSeTrVice 
Public class SYSUSeTSEIVICeImnol 1mplements SYSUSeETESeTEVICE 1 
GRAutowired 


private SySsUserMapper sysUserMapper; 


QOverride 
Public PageResult findPage (PageRequest pageRequest) 1 
return MybatisPageHelper.findPage (pageRequest, sysUserMapper); 


// 因为 我 们 关注 的 是 分 页 查询 ， 此 处 省 略 其 他 方式 实现 


编写 分 页 查询 接口 ， 简 单调 用 Service 的 查询 接 口 。 
SysUserController.java 


QRestcController 
QRequestMapping ("user™") 
public class SysUserController { 


QAuUutowired 


Brivate SveaUseTSoervicCe sv aUserServieer 
@PostMapping (value="/findPage™) 


public HttpResult findPage (GRequestBody PageRequest pageRequest) 1{ 
return HitpResult .ok(sysUserService.findPage (pageRequest})}s 
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10.3.4 接口 测试 
重新 编译 月 动 应 用 ， 访 问 http:Wlocalhost:8001/swagger-ui.html， 进 入 Swagger 测试 页 ， 如 
图 10-12 所 示 。 
{} swagger 
basic=error=-controller Basic Error Controller 


sys-user-controller Sys User Controller 
osr | /user/findPage fndpage 


图 10-12 


分 别 输入 不 同 的 分 页 但 询 参 数 , 合 看 迟 回 的 分 页 结 米 , 如 来 没有 问题 束 可 以 了 , 如 图 10-13 
所 示 。 


osr | /user /findpage fndpage 


Pararmeters 


Name Deseriptian 


pageRequest " TS pageRequest 


[ body) 
Exmmple Was Medi 


10-13 


返回 结果 示例 ， 伍 询 参 数 { pageNum: 1, pageSize: 3 }， 如 图 10-14 所 示 。 


Request URL 


http: / /Localhost:A08] /user /indPage 
Server response 


Details 


Response body 


LL 

"code =: 89 

"mse Mll, 

data": 有 
papeNMum™: 1, 
"apesize": 3 
"totalSsire"s 12, 
"totalPaees"™":s 
acontent™s [ 


有 
EL 


se 卫 ， 
i 
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业务 功能 的 开发 基本 都 是 各 种 增 、 删 、 改 、 碍 业务 的 编写 ， 大 多 都 是 重复 性 工作 ， 业 务 编 
写 也 没有 多 少 技术 要 点 可 讲 ， 这 里 束 合 机 构 入 理 的 开发 来 作为 葵 础 CURD 的 开 友 范例 。 

首先 ， 需 要 事 驳 规划 一 下 ， 根 据 需 求 设 计 好 需要 的 接口 ， 比 如 字典 官 理 除了 通用 的 保存 、 
删除 、 分 页 查询 接口 外 ， 还 需要 一 个 根据 标 们 名 称 租 询 记 录 的 租 询 方法 。 


10.4.1 编 瑟 DAO 接口 
打开 DAO 接口 ， 添 加 findPage、findByLable 和 findPageByLabel 三 个 接口 。 
SysDictMapper.java 
/* 坟 

* 分 页 查询 

* lparam label 

| 
List<SysDict> findPage (}; 


/ 喜 丙 
* 根据 标签 名 称 查 询 
* Qparam label 
et 
List<SysDict> findBvyLable (QParam(value="label™") String label); 


/** 

* 根据 标 釜 名称 分 页 查询 

* Qparam label 

2 

List<SysDict> findPageByLabel (Param (value~="label™") String label); 


10.4.2 编写 映射 文件 
打开 映射 文件 ， 编 写 3 个 查询 方法 : findPage、findByLable 和 findPageByLabel。 


SysDictMappe.xml 


<select id="findPage”" resultMap="BaseResultMap"> 
= 
<include refid="Base Column List™ /> 
Trom SYSs dict 


</select> 
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<Select id="findPageByLabel™ parameterType="Java.lang.Sstring”" 
resultMap~="BaseResultMap"> 
<bind name—"pattern™" value=""$" + parameter.label + S$'™ /> 
二 oa 
<include refid="Base Column List™ /> 
from sys dict 
where label like #{patternl} 
</ Select> 
<select id="findBRyLable" parameterType="Java.lang.string™" 
resultMap="BaseResultMap"> 
SE 
<include refid="Base Column List™ /> 
from sys dict 
where label = #{label,jdbcType=VARCHAR] 


</select> 


10.4.3 ”编写 服务 接口 
新 建 一 个 字 则 接口 并 继 于 通用 业务 接口 CurdService， 客 外 添加 一 个 findByLable 接口 。 
SysDictService.java 


太太 坟 

* 字典 管理 

* fauthor Louis 

* ldate Jan 13, 2019 


public jnterface SysDictService extends CurdService<SysDict> | 


/ 吉 雄 

* 根据 名 称 碍 询 

* param lable 

* f@return 

so 

List<SysDict> findByLable (string lable); 


10.4.4 ”编写 服务 实现 
新 建 一 个 实现 类 并 实现 SysDictService, 调用 DAO 3 


: 现 相应 的 业务 功能 。 


SysDictServicelmpl.java 


QService 


public class SysDictServiceImpl implements SysDictService 1 


[he 
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GAUutowired 


private SysDictMapper sysDictMapper; 


QOverride 
public int save (SysDict record) I 
if(record.getId() == null || record.getId() == 0) 
return svsDictMapper.insertSelective{(record});s 
| 


return sysDictMapper.updateByPrimaryKevSselective (record); 


} 


QOverride 
Public int delete (SysDict record) I 
return sysDictMapper.deleteByPrimaryRKey (record.get1Id(}); 


} 


QOverride 
public int delete (List<SvsDict> records} ({ 
foriSvsDict record:records} { 
delete (record}); 
} 


return ] : 


} 


QOverride 
Public SYysDict findBylId{(Long id) I 

return sysDictMapper.selectByPrimaryRKey (id); 
} 


QOverride 
Publjic PageResult findPage (PageRequest pageRequest) 1 
Object label = pageRequest. getParam("label™); 
if{(label!l= null)} { 
return MybatisPageHelper.findPage (pageRequest, sysDictMapper, 
"findPageByLabel", abe lj : 
} 
return MybatisPageHelper.findPrage (pageRequest, sysDictMapper}); 
} 


QOverride 
public List<SysDict> findByLable (String lable) I 
return sysDictMapper.findByLable (lable)}):; 
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10.4.5 ”编写 控制 颖 
新 建 一 个 字段 定理 控制 器 ， 注 入 Service 并 调用 Service 的 方法 实现 业务 接口 。 
SysDIictController.java 


QRestController 
QReaquestMapping ("dict") 


PUDBlic class SvSDictController 1 


QAutowired 


private SysDictSservice svySsDictServices 


QPostMapping (value="/save") 
public HttpResult save (RequestBody SysDict record) I 


return HttpResult .ok (sysDictService.save (record) ); 


@PostMapping (value="/delete") 
public HttpResult delete (QRequestBody List<SysDict> records) { 


return HttpResult .ok(svsDictservice.delete(records})):; 


@PostMapping (value="/findPage") 
public HttpResult findPage (QRequestBody PageReduest pageRequest) 1{ 
return HitpResult .ok(sysDictService.findPage (pageRequest})}; 


@GetMapping (value="/findByLable™") 
public HttpResult findByLable (QRequestParam String lable) { 


return HttpResult .ok (sysDictService.findByLable (lable})}); 


其 他 业务 功能 还 有 诸如 用 户 管理 、 角 色 管 理 、 机 构 管 理 、 菜 单 管理 、 系 统 日 志 等 业务 都 与 
此 同 理 ， 这 里 束 不 再 浪费 遍 幅 了 ， 读 者 根据 目 喘 需求 有 针对 性 地 公 阅 相关 代码 即 可 。 
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DD. 业务 接口 汇总 


10.5.1 用 户 管理 
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1. 保存 用 户 


接口 URL: /user/save 
接口 参数 : SysRole 
返回 结果 : HttpResult 
2. 删除 用 户 


接口 URL: /user/delete 
接口 参数 : SysRole 集合 
返回 结果 : HttpResult 


3. 分 页 查询 

接口 URL: mserfindPage 
接口 参数 : PageRequest 
返回 结果 : HttpResult 

4. 根据 名 称 查询 


接口 URL: /user/findByName 
接口 参数 : String name 

返回 结果 : HttpResult 

接口 描述 : 根据 名 称 碍 询 

5. 查询 用 户 权 限 

接口 URL: /user/findPermissions 
接口 参数 : String name 

返回 结果 : HttpResult 

接口 描述 : 查询 用 户 权 限 


6. 查询 用 户 角色 


接口 URL: 
接口 参数 : 
返回 结果 : 
接口 描述 : 


/user/ fndUserRoles 
Long userld 
HttpResult 

俘 询 用 户 权 限 


10.5.2 ”机构 管 理 
1. 傈 存 机 构 


接口 URL: 
接口 参数 : 
返回 结果 : 
接口 描述 : 


/dept/save 
SysDept 
HttpResult 
保存 记录 


2. 删除 机 构 


接口 URL: 
退回 结 末 : 
接口 描述 : 


/dept/delete 
SysDept 集合 
HttpResult 
删除 记录 


3. 查询 机 构 树 


接口 URL: 


接口 参数 : 
返回 结果 : 
接口 描述 : 


/dept/findTree 
无 
HttpResult 
俘 询 机 构 树 


10.5.3 ”角色 管理 


1. 体 存 角色 
接口 URL: /role/save 


接口 参数 : 
返回 结果 : 
2. 删除 角 


SysRole 
HttpResult 
保存 记录 


色 


接口 URL: /role/delete 


接口 参数 : 
返回 结 来 : 


SysRole 集合 
HttpResult 
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接口 描述 : 删除 记录 

3. 分 页 查询 

接口 URL: /role/findPage 
接口 参数 : PageRequest 
返回 结果 : HttpResult 
接口 描述 : 分 页 查询 

4. 查询 全 部 


接口 URL: /role/findAll 
接口 参数 : PageRequest 
返回 结果 : HttpResult 
接口 描述 : 但 询 全 部 角色 


5. 查询 角 色 荣 单 


接口 URL: /role/ findRoleMenus 
接口 参数 : Long roleld 

返回 结果 : HttpResult 

接口 描述 : 查询 角色 菜单 

6. 体 存 角色 菜单 

接口 URL: /role/ saveRoleMenus 
接口 参数 : SysRoleMenu 集合 
返回 结果 : HttpResult 

接口 描述 : 保存 角色 菜单 


10.5.4 ”菜单 管理 
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1. 保存 菜单 

接口 URL: /menu/save 
接口 参数 : SysMenu 

返回 结果 : HttpResult 

2. 删除 菜单 

接口 URL: /menu/delete 
接口 参数 : SysMenu 集合 
返回 结果 : HttpResult 
接口 摘 述 : 删除 记录 


3. 查询 导航 菜单 树 


接口 URL: /menu/findNavTree 
接口 参数 : String userName 
返回 结果 : HttpResult 

接口 描述 : 查询 导航 菜单 树 

4. 查询 菜单 树 

接口 URL: /menu/findMenuTree 
返回 结果 : HttpResult 


10.5.5 字典 害 理 


1. 保存 字典 

接口 URL: /dict/save 

接口 参数 : SysDict 

返回 结果 : HttpResult 

2. 删除 字典 

接口 URL: /dict/delete 

接口 参数 : SysDict 集合 

返回 结果 : HttpResult 

3. 分 页 查询 

接口 URL: /dict/findPage 
接口 参数 : PageRequest 

返回 结果 : HttpResult 

4. 根据 标签 查询 

接口 URL: /dict/ findByLable 
接口 参数 : String lable 

返回 结果 : HttpResult 
接口 拍 述 : 根据 标签 名 称 俘 询 


81 


Spring Boot+Spring Cloud+Vue+Element 项 目 实战 : 手把手 教 你 开发 权限 管理 系统 


10.5.6 系统 配置 


10 
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1. 保存 配置 


接口 URL: /config/save 
接口 参数 : SysConfig 
返回 结果 : HttpResult 
2. 删除 字典 


接口 URL: /config/delete 
接口 参数 : SysConfig 集合 
返回 结果 : HttpResult 

3. 分 页 查询 

接口 URL: /config/findPage 
接口 参数 : PageRequest 
返回 结果 : HttpResult 

接口 描述 : 分 页 查询 

4. 根据 标签 查询 


接口 URL: /config/ findByLable 
接口 参数 : String lable 
返回 结果 : HttpResult 
接口 描述 : 根据 标 丛 名 称 得 询 


.5.7 ”登录 日 志 


1. 分 页 查询 

接口 URL: /loginlog/findPage 
接口 参数 : PageRequest 

返回 结果 : HttpResult 

2. 删除 操作 日 志 

接口 URL: /loginlog/delete 
接口 参数 : List<SysLoginLog> 
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返回 结果 : HttpResult 


10.5.8 ”操作 日 志 


1. 分 页 查询 

接口 URL: /log/findPage 
接口 参数 : PageRequest 
返回 结果 : HttpResult 

2. 删除 操作 日 志 

接口 URL: / log/delete 
接口 参数 : List<SysLog> 
返回 结果 : HttpResult 
接口 描述 : 清除 操作 日 志 


导出 Excel 报表 


在 实际 项 目 中 ,报表 导出 是 非常 普通 的 需求 ， 特 别 是 Excel 报表 ， 对 数据 的 汇总 和 传递 都 
非常 便利 , Apache POI 是 Apache 软件 基金 会 的 开放 源 但 图 陈 库 , POI 提供 API 给 Java 程序 对 
Microsoft Office 格式 档案 读 和 写 的 功能 。 这 里 , 我 们 将 使 用 POI 实现 用 户 信 息 的 Excel 报表 作 
为 旋 例 进行 讲解 ， 后 续 读 者 有 其 他 的 报表 守 出 裔 求 可 参考 此 东 例 。 

e 官网 地 址 : http://poi.apache.org/ 

e 相关 教程 : https:Wwww.yiibai.comyapache pol/ 


10.6.1 状 加 依赖 
在 mango-common 下 的 pom 文件 中 添加 POI 的 相关 依赖 包 ， 最 新 版 本 是 4.0.1。 


pom.xml 
l= Pl 
<ddependency> 


<gqroupId>org.apache .poi</grouplId> 
<artifactId>poi—~ooxml</artifactId> 
<version>4.0.1</version> 


</dependency> 
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10.6.2 ”编写 服务 接口 


在 用 户 管理 接口 中 添加 一 个 导出 用 户 信息 Excel 报表 的 方法 ， 采 用 分 页 查询 的 方式 ， 可 以 
传 入 要 导出 数据 的 犯 围 , 如 再 要 导出 全 部 ， 把 页 数据 调 全 很 大 即 可 ， 同 时 因为 调用 的 古 分 页 答 
询 方 法 得 询 数据 ， 所 以 同样 支持 传 入 过 滤 字 段 进 行 数 据 过 滤 。 


SysUserService.java 


六 

* 生成 用 户 信 息 Excel 文件 

* aparam pageRequest 要 导出 的 分 页 查询 参数 
* Q@return 

= 


File createUserExcelrFile (PagqeRequest pageRequest})s 


10.6.3 ”编写 服务 实现 
在 用 户 管理 服务 实现 类 中 编写 实现 代码 ， 生 成 Excel 文件 。 
SysUserServicelmpl.java 


QOverride 
public File createUserExcelFile(PageRequest pageRequest) I 
PageResult pageResult = findPage (pageRequest});? 


return createUserExcelFile(pageResult.getContent ()}; 


public static File createUserExcelFile(List<?> records) 1{ 

if {records == null}) 1 
records = new ArrayList<>(})? 

} 
Workbook workbook = new XSSFWorkbook () ， 
Sheet sheet = workbook.createSsheet(}); 
ROW row0 = sheet.createRow (0); 
int columnIindex = 0; 
TOWU .createCell (columnIndex) .setCellValue(" No); 
row0 .createCell (++columnIindex) .setcCcellValue ("ID™);}; 
row0.createCell (++columnIndex) .setCellValue 3 
row0O0 .createCell (+tcolumnIindex) .setCellValue ("昵称") > 
row0.createCell (++columnIndex) .setCellValue ("机 构 "); 
row0 .createCell (++columnindex) .setCellValue (" 骨 色 ") 
row0 .createCell (++columnIndex) .setCellValue ("上 邮箱") ; 
row0 .createCell (++columnIndex) .setCellvalue ("手机 号 "); 
row0.createCell (++columnIndex) .setCellValue (状态 ") ; 
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row0 .createCell (++columnIndex) .setCellVvalue (头像 ") ; 

row0 .CreateCe11 (++columnIndex) .setCellvalue ("创建 人 "); 

row0 .createCell (++columnIndex) .setcellvalue ("创建 时 间 ") ; 
row0 .createCell (++columnIindex}) .setCellValuel(™" 最 后 更 新 人 " | 全 - 
row0 .createCell (++columnIndex}) .setCellVvaluel(" 最 后 更 新 时 间 " bs 


tor Vint T= 0 1 < Tacordssize(): +ty 1 
SYSUSeTr USer = (SYSUSser} records .oet (i}); 
ROW TOW = sheet.createRow(1 + 1); 
for {int 1 = 0; J] < columnindezx + J; j++} { 


row.createCell(]); 
} 
columnIndex = 0; 
row.getcCcell tcolummindex} .setCellValue(i + 1) : 
row.getCell({(++colummIindex) .setCellValue (user.getId()); 
row.getCell(++columnIindex) .setCellValue (user.getName () ); 
row.getcCcell{i+tcolumnindex) .setCellValue (user.getNickName ()}; 
row.getCell({(++colummindex) .setCellValue (user.getDeptName () ); 
row.getcCcellt{ti+tcolumnindex) .setCellValue (user.getRoleNames (})}; 
row.getCell (+tcolumnIindex) .setCellValue (user.getEmail ()}); 
row.getCell (+tcolumnIindex) .setCellValue (user.getstatus ())}); 
row.getCell {+tcolumnIindex) .setCellValue (user.getAvatar ())}); 


row.getCell({(++columnIindex) .setcCcellValue (user.getcCreateBy()); 


row.getcCell(t+ticolumnindex)}) .setCellVvalue (DateTimeUtils.getDateTimne (user.get 
CreateTime ()}))}); 


row-.getCell (++colummindex) .setCellValue (user.gqetLastUpdateBy (}}; 


row.getcCell(+ticolumnindex) .setCellValue (DateTimeUtils.gqetDateTimne (user.gqet 
LastUpdateTime ())) ， 
} 


return PoilUtils.createExcelFile (workbook, "download USeIT ) 7 


10.6.4 编 与 控制 希 

在 用 户 管理 控制 器 类 中 添加 一 个 接口 ， 并 调用 Service 获取 File， 最 终 通过 文件 操作 工具 
类 将 File 下 载 到 本 地 。 

SysUserController.java 


QPostMapping (value="/exportExcelUser") 
public void exportExcelUser (RequestBody PageRequest pageRequest, 
HitpservietResponse Tes 1 


ET file = SvesUserService.createUserExcelrFile (pageRequest}s 


85 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


FileUtils.downloadFile TITeS，， Tile, file.getName (})}); 


10.6.5 工具 类 代码 


为 了 简化 代码 ， 前 面 代码 的 实现 封装 了 一 些 工具 类 。 为 了 便于 理解 ,这 里 把 关键 的 代码 贴 
出 来 。 


1. PoiUtils 
在 编写 服务 实现 的 时 候 我 们 通过 PoiUtils 中 的 createExcelFile 方法 生成 Excel 文件 。 


/二 闪 
* POI 相关 操作 
* Qauthor Louis 
* fdate Jan 14, 20193 
ee 
public class PoiUtils 1 


/太太 
EH Exeel 作 
* QAparam workbook 
* lparam fileName 
地 
Public static File createExcelF1ile (Workbook workbook, String fileName) 1{ 
OutputSstream stream = null; 
File file = null; 
try I{ 
file 三 File.createTemprFile(lftileName, "XIsx" )s 
stream = new FileOutputSstream(file.getAbsoluteFile()); 
Workbook.write (stream); 
} catch (FileNotFoundException e) I 
e.printSstackTrace (}; 
} catch (IOException ee) I 
ee.printSstackTrace (}; 
} finally I 
IOUtils.closeQuietly (workbook}; 
IOUtils.closeQuietly (stream); 
} 


return file; 


2. FlleUtils 
在 编写 导出 接口 的 时 候 我 们 通过 FileUtils 中 的 downloadFile 将 Excel 文件 下 载 到 本 地 。 
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/不 

* 文件 相关 操作 

* Qauthor Louis 

* QAdate Jan 14, 2019 
Public class FileUtils | 


1 坟 支 
下 载 文件 


* param response 


入 


* @param file 

* @param newFileName 

-/ 

public static void downloadFile (HttpServiletResponse response, Fijle file, 
String newFileName)}) { 
try { 
response.setHeader("Content-—Disposijition", "attachment; filename=" 
+ new String (newFlileName .getBytes ("1ISO—8859—1"), "UTF-—8™)); 
Bufferedoutputstream Pos = 
new BufferedOutputSstream(response.getOutputstream()); 
Inputstream 1S = new FileliInputstream(lfile.getAbsolutePath(}}s; 
BufferedIinputstream bis = new Bufferedinputstream(is); 
int length = 0; 
bytell temp = new bytell * 1024 * 10]s 
while ((length = bis.read(temp)) != -1) 1{ 
bos.writelttemp, 0 length}); 
} 
Bos. Elushiys 
bis.closel(}); 
bos.close()}); 
1s.close(}); 
} catch {Exception 已 ) 1 


e.printstackTrace () 7; 


10.6.6 ”接口 测试 

编译 局 动 应 用 ， 访 问 http://localhost:8001/swagger-ui.html， 进 入 Swagger 接口 测试 页 。 

销 入 分 页 但 询 信息 , 指定 要 寻 出 的 用 尸 数据 范围 , 早 击 Execute 按钮 友 壕 请求 , 如 图 10-15 
所 示 。 
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Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 


POST /user /exportExcelUser exportExcelUser 


Name Description 


pageRequest * ue pageRequest 


(body) 
Example Walue Model 
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最 终 成 功 叶 出 的 用 户 报 表 文 件 内 容 如 图 10-16 所 示 。 


sm Insert = 
ES Format * 


Derieral 
和 
锅 癌 


豆 condxional Formatting - 
ee Foammat as Table= 
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[2 


FSIEISIe| 


用 户 名 ”昵称 机 构 

1 dmin 
22 liubei 刘备 
23 zhaoyun 赵云 

24 zhugelian 诸 柄 可 
25 caocao 匣 操 
25 dianwei 上 典 事 

27 wiahoudut 要 侵 悼 
启 un ” 荀 或 
29 sunqguan 孙权 
30 zhouyu 周 珍 
31 luxun 陆 示 


YY si Mk 


1 
可 
3 
二 
要 
[i 
7 
曾 
| 


角色 上 最 箱 ” 手机 导 ” 状 本 ” 头像 ” 创建 人 创建 时 间 最 后 更 新 量 后 更 新 时 间 | 
超级 管理 上 海 分 公 超级 管理 admin@q 


人 下 二 格林 
开发 人 员 testB@qq.( 
测试 人 品 testEqq' 
开发 人 员 i 
开发 人 届 testBqq 
开发 人 号 testEqqd 
开发 人 郧 testBqq.c 

lestg.t 
开发 人 员 testBqq.t 
并 发 人 人员 testEqqi 
Wp | BB sain sa 


Sheet0 由 


| 
LIL le Bt le le le le le le eh 


[Ey Cell Styles > 


吝 昌 rnim 
ETalayl[li 
adrmin 
gmin 
二 晶 Fniiny 
a0rnin 
agdmin 
各 Fmim 
站 同 Fi 
adrmnin 
Admin 
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2018-08 1 admin 
2018-09-2 admin 
2018-09-2. Bdmin 
2018-09:2. admin 
2018.09.2 nsdmin 
2018-09-2. admin 
2018-09-2 admin 
018-092. admin 
2018-09-.2 mdmin 
2018-093-2. 8dmin 
2018-09-2. Bdmin 


二 Ee 1 ss 


围 癌 


2018-08-14 11:11-11 
2019-01-10 11:41:13 
2018-03-23 19.4332 
2018-09-23 19;44:29 
2019-01-10 17:59-14 
2018-09-23 19:45:57 
2018-09-23 19:46:17 
2018-11-04 15:33:17 
2018-09-23 1 雹 油 7:03 
2018-09-23 19:48-04 
2018-09-23 19:47:58 


mw | 二 


-和 


上 J 
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用 户 登 录 沉 程 是 后 台 官 理 系统 必 备 的 功能 , 接 下 来 我 们 将 实现 用 户 登 录 流 程 。 在 这 个 过 程 
中 ， 我 们 还 将 利用 kaptcha 实现 登录 验证 公 ， 利 用 Spring Security 进行 安全 控制 。 


登录 验证 码 


登录 辅助 验证 是 大 多 数 登录 系统 都 会 用 到 的 一 个 功能 , 验证 方式 也 是 多 种 多 样 的 , 比如 合 
录 验 证 码 、 登 录 验 证 条 以 及 拼图 拖 动 块 等 , 我 们 这 里 就 针对 输入 登录 验证 码 的 方式 来 实现 一 个 
范例 。kaptcha 是 一 个 开源 的 验证 码 实现 库 ， 利 用 这 个 库 可 以 非常 方便 地 实现 验证 码 功能 。 


11.1.1 状 加 依赖 


在 mango-admin 下 的 pom 文件 深 加 kaptcha 依赖 包 ， 最 新 版 本 是 0.0.9。 


pom.xml 


lI kaptecha = 

<dependency> 
<groupId>com.github.axet</grouplId> 
<artifactId>kaptcha</artifactId> 
<version>.0.9</version> 


</dependency> 


11.1.2 ) 闲 加 配置 


在 config 包 下 创建 一 个 kaptcha 配置 类 ， 配 置 验证 码 的 : 


KaptchaConfig.java 


a 喜 去 
* 验证 码 配 置 
* QQauthor Louis 
* QAdate Jan 14, 2019 
Ee 


QConfiguration 
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public class Kaptchaconfigqg 1{ 


QBean 

Public DefaultRKaptcha Producer () 1 
Properties properties = new Properties(}; 
properties.put("kaptcha.border, "no )s 
properties.put("kaptcha.textproducer.font.color™, "black ) :> 
Broperties.putt(" kaptcha.textproducer.char.space ys "DI):? 
Config config = new Config (properties}); 
DefaultRKaptcha defaultKaptcha = new DefaultrKaptcha (1) ， 
defaultRKaptcha.setcConfig (config)}s 
return defaultKaptcha; 


11.1.3 生成 代码 
新 建 一 个 控制 右 ， 提 供 系 统 登 录 相 关 的 API， 在 其 中 添加 验证 码 生 成 接口 。 
SysLoginController.java 


QRestController 
public class SysLoginController 1 
QAutowired 


private Producer producer; 


QQGetMapping ("captcha.jpg") 
public void captcha (HttpServletResponse response, HttpServiletRequest regquest) 
throws ServletException, IOException 二 
response.setHeader("Cache-Control", "no--store, no—cache™)}); 


response.setContentType ("image/jpeg"™);} 


// 生成 文字 验证 码 


String text = producer.createText (});» 
// 生成 图 片 验证 码 
ButteredImage image = producer.createlmage (text)}); 


// 保存 到 验证 码 到 session 

request .getsessionl() .setAttribute(Constants .KAPTCHA SESSION KEY, text); 
ServletOutputSstream out = response.getoutputstream!()}); 
ImagelIO.write(image, ”pg Out >: 


TOUt1TsSs -CTLoSewuletLYLoOUL】 ; 
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11.1.4 ”接口 测试 


编译 局 动 应 用 , 访问 http://localhost:8001/swagger-ui.htm!l, 进入 Swapgger 测试 页 ,如 图 11-1 
所 示 。 


Request URL 


https //Localhost:B88] /captcha. 1pe 


JErver response 


Code Details 


Spring Security 


在 Web 应 用 开 友 中 , 安全 一 直 是 非常 重要 的 一 个 方面 。 Spring Security 基于 Spring 框架 ， 
提供 了 一 套 Web 应 用 安全 性 的 完整 解决 方案 。JWT (JSON Web Token) 是 当前 比较 主流 的 
Token 令 脾 生成 方案 ， 非 常 适合 作为 登录 和 授权 认证 的 凭证 。 这 里 我 们 就 使 用 Spring Security 
并 结合 JWT 实现 用 户 认 证 (Authentication) 和 用 户 授权 (Authorization) 两 个 主要 部 分 的 安全 
内 容 。 


e JWT 官网 : https://jwt.io/introduction/ 
e Spring Security 官网 : https://spring.io/projects/spring-security 
e Spring Security 教程 : https:/www.w3cschool.cn/springsecurity/ 


11.2.1 状 加 依赖 


在 mango-admin 下 的 pom 文件 中 添加 Spring Security 和 JWT 依 顿 包 ，jwt 目前 的 最 新 版 
本 是 0.9.1。 


pox.ml 


1 Pring SecUrily —— 
<dependency> 
<groupId>org.springframework.boot</grouplId> 
<artifactId>spring—boot—starter—securitvy</artifactId> 
</dependency> 
a 


<dependency> 
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<gqroupId>io.jsonwebtoken</groupId> 
<artifactId>jjwt</artifactId> 
<Version>0.9.1</version> 


</dependency> 


11.2.2 并 加 柜 置 

在 config 包 下 新 建 一 个 Spring Security 的 配置 类 WebSecurityConfig， 主 要 是 进行 一 些 安 
全 相关 的 配置 ， 比 如 权限 URL 匹配 策略 、 认 证 过 滤器 配置 、 定 制 身份 验证 组 件 、 开 启 权 限 认 
证 注解 等 ， 具 体 代 码 作 用 参见 代码 注释 。 


WebsSecurityContfig.java 


QConfiqguration 

@EnableWebSecurity // 开启 Spring Security 
@EnableGlobalMethodSsecurity (prePostEnabled = true) // 开启 权限 注解 ， 如 : 
@PreAuthorize 注解 

public class WebSecurityConfigqg extends WebSecurityConfiqurerAdapter | 


QAuUutowired 


Private UserDetailsSservice USerDetallsSsServices 


QOverride 

Public void configure (AuthenticationManagerBuilder authj throws Exceptjon 1 
// 使 用 目 定义 身份 验证 组 件 
auth.authenticationProvider (new 


JwtAuthenticationProvider(userDetailsService)); 


} 


QOverride 
protected woid configqure (HttpSecurity httP throws Exception 1 
// 禁用 csrf， 由 于 使 用 的 是 JHT， 我 们 这 里 不 需要 csrf 
httPp -Cors() .and(} -casrf (} .disable(}) .authorizeRequests{()} 
// 跨 域 预 检 请 求 
-antMatchers {HttpMethod .OPTIONS, ™v/**") .permitAll!() 
// web jars 
.antMatchers ("/webjars/**") .permitAll () 
// 查看 SQL 监控 Cdruid) 
.antMatchers ("/druid/**") .permitAll() 
// 首页 和 登录 页 面 
.antMatchers ("/") .permitAll() .antMatchers ("/login™.") .permitAll() 
// swagger 
.antMatchers ("/swagger—-ui.html") .permitAll() 


.antMatchers ("/swagger-resources/**") .permitAll () 
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.antMatchers("/v2/api—docs"™}) .permitAll() 
.antMatchers("/webjars/springfox—swagger—ui/**") .permitAl]l () 
// 验证 码 
-antMatchers{"/captcha.jpg**") .permitAll () 
// 服务 监控 
.antMatchers ("/actuator/**") .permitAll {() 
// 其 他 所 有 请 求 需 要 喘 份 认证 
-anYReduest () .authenticated (); 
// 退出 登录 处 理 器 
http.logout() .logoutSuccessHandler (new 
HttpSstatusReturningLogoutSuccessHandler ()})); 
// token 验证 过 滤器 
http.addFilterBefore (new 
JwtAuthenticationFilterl(lauthenticationManager ()), 


UsernamePasswordAuthenticationFilter.class):; 


} 


QBean 
QOverride 


Public AuthentjcationManager authenticationManager() throws Exception 1{ 


return super.authentijcationManager (); 


} 


11.2.3 ”登录 认证 过 滤器 

登录 认证 过 滤器 负责 登录 认证 时 检查 并 生产 令 幅 保存 到 上 和 下文, 接口 权限 认证 过 程 时 ， 系 
统 从 上 下文 获 取 令 牌 校 验 接 口 访 问 权 限 ， 新 建 一 个 security 包 ， 在 其 下 创建 
JwtAuthenticationFilter 并 继承 BasicAuthenticationFilter， 窗 写 其 中 的 doFilterInternal 方法 进行 
Token 校 验 。 


JwtAuthenticationFilter.java 


/ 友 直 
* 登录 认证 过 滤器 
* @author Louis 
* QAdate Jan 14, 20193 
-A 


public class JwtAuthentijcatijonFilter extends BasicAuthenticationFilter I{ 


@Autowired 
public JwtAuthenticationFijlter (AuthenticationManager authenticationManager}) | 


super(authenticationManager); 
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QOverride 
protected wvoid doFilterinternal (HttpServietRegquest regquest, HttpServietResponse 
response, FilterChain chain}) throws IOException, ServiletException { 
// 获取 token， 并 检查 登录 状态 
SecuritvyUtils.checkAuthentication (request); 


chain-.doFilteriregquesty response)s 


这 里 我 们 把 验证 馆 辑 抽取 到 SecurityUtils 的 checkAuthentication 方法 中 ， 
checkAuthentication 通过 JwtTokenUtils 的 方法 获取 认证 信息 并 保存 到 Spring Security 上 下 文 。 


SecurltyUtlls.Java 


1 坟 妈 
* 获取 令 牌 进行 认证 
* Qparam request 
Public static void checkAuthentication (HttpServietReaquest request)} { 
// 获取 令 牌 并 根据 令 牌 获取 登录 认证 信息 
Authentication authentication = 
JwtTokenUtils.getAuthenticationeFromToken (request); 
// 设置 登录 认证 信息 到 上 下 文 


SecurityContextHolder.getContext () .setAuthentication(authentication}); 


JwtTokenUtils 的 getAuthenticationeFromToken 方法 获取 并 校 验 请 求 携 市 的 令 牌 。 
JwtiokenUtlls.Java 


/* 
* 根据 请 求 令 牌 获取 登录 认证 信息 
* param token 令 牌 
* Q@return 用 户 名 
ne 
public static Authentication getAuthenticationeFromToken (HttpServletRequest 
request) { 
Authentication authentication = null; 
// 获取 请 求 携带 的 令 牌 


String token = JwtTokenUtils.getToken (ITedGuesS 七 ) 


ifittoken i= null) 1 
// 请 求 令 牌 不 能 为 空 
if (SecuritvyUtils.getAuthentication() == null} { 
// 上 下 文中 Authentication 为 空 
Claims claims = getClaimsFromToken (token)}).; 
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if{(claims == nully 
return null; 
} 
String username = claims .getSsubject () : 
if(username == null) I 
return null; 
} 
if(isTokenExpiredl(ltoken}} 1 
return mll: 
} 
Object authors = claims .get (AUTHORITIES).; 
List<GrantedAuthority> authorities = new ArrayList 
<GrantedAuthority>(}; 
if (authors {= null && authors instanceof List)} 1{ 
for (Object object : {List}) authors} { 
authoritijes.add (new GrantedAuthorityImpl( 
(String) ((Map) object) .get ("authority™”)))}); 


| 


authentication = new JwtAuthenticatioToken (username, null, 
authorities, token); 
| else 1{ 
1 上 LvalLidateTIoOokKenI( toOoKen， SecurityUtils.getUsername (})})}) 1 
// 如 果 上 下 文中 Authentication 非 空 ， 且 请 求 令 牌 合法 ， 
// 直接 返 回 当前 登录 认证 信息 


authentication = SecurityUtils.getAuthenticationt():; 


} 


return authentication; 


JwtTokenUtils 的 getToken 尝试 从 请 求 涉 中 获取 请 求 携 市 的 令 脾 ， 默 认 从 请 求 头 中 的 
"Authorization" 人 参数 以 "Bearer "开头 的 信息 为 令 牌 信息， 在 为 衬 则 和 莹 试 从 "token" 参 数 获 取 。 


JwtiokenUtlls.Java 


A 太太 
区 获取 请 求 token 
* param request 
* freturn 
*/ 
public static String getToken (HttpServietRegquest request) 1{ 
String token = regquest.getHeader ("Authorization” )}); 


String tokenHead = "Bearer "3s 
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1 上 (七 口 Kenm == null) I 
token = TeGuest -getHeadeTr (- LokeTm ) 
} else jf(token.contains (tokenHead)})} 1 
token = token.substring(tokenHead. length(})}); 
} 
if({"”" .equalsi(token})) 1 
token = null:; 


} 


return token:; 


11.2.4 ”身份 验证 组 件 


Spring Security 的 登录 验证 是 交 由 ProviderManager 负责 的 ，ProviderManager 在 实际 验证 
的 时 候 又 会 通过 调用 AuthenticationProvider 的 authenticate 方法 来 进行 认证 。 数 据 库 类 型 的 默 
认 实 现 方案 是 DaoAuthenticationProvider。 我 们 这 里 通过 继承 DaoAuthenticationProvider 定制 默 
认 的 登录 认证 逸 辑 ， 在 Security 包 下 独 建 验证 问 JwtAuthenticationProvider 并 继承 
DaoAuthenticationProvider， 和 窗 霖 实现 additionalAuthenticationChecks 方法 进行 密码 匹配， 我 们 
这 里 没有 使 用 默认 的 密码 认证 器 (我们 使 用 盐 salt 来 对 密码 加 密 , 默认 密码 验证 器 没有 加 盐 )， 
所 以 在 这 里 定制 了 目 己 的 密码 校 验 逻辑 ， 当 然 你 也 可 以 通过 和 且 接 窗 写 authenticate 方法 来 完成 
更 大 范围 的 登录 认证 需求 定制 。 


JwtAuthenticationProvider.java 


上 吉 去 
* 身份 验证 提供 者 
* fauthor Louis 
* ldate Jan 14, 2019 


public class JwtAuthenticationProvider extends DaoAuthenticationpPprovider | 


Public JwtAuthenticationProvider (UserDetailsService userDetailsService) ({ 


setUserDetailsService (userDetailsService); 


QOverride 
protected woid additionalAuthenticationchecks (UserDetails userDetails, 
UsernamePasswordAuthentijcationToken authentication) 
throws AuthenticationException I 
if (authentication.getCredentials() == null) 1 
loogger.debugt(" Authentication failed: no credentials provided™}; 
throw new BadCredentialsExceptijon( 


messages.getMessage ("AbstractUserDetailsAuthenticationProvider 


96 


第 11 章 登录 流程 实现 


-badCredentials", "Bad credentials™)}))};}; 


} 


String presentedPassword = authentication.getCredentials(} .toString(}; 

String salt = ((JwtUserDetails} userDetails) .getSalt(}; 

1if (Inew PasswordEncoder (Sa tj) .matches (userDetails .getPassword(), 
presentedPassword)) { // 和 窗 写 密码 验证 逻辑 


logger.debug("Authentication failed: password does not match") 


throw new BadCredentialsExceptijon (messages -getMessage ( 
"AbstractUserDetailsAuthenticationProvider.badCredentials"™, 


"Bad credentials™)}));}; 


11.2.5 ”认证 信息 查询 

我 们 上 面 提 到 登录 认证 默认 是 通过 DaoAuthenticationProvider 来 完成 登录 认证 的 ， 而 我 们 
知道 登录 验证 器 在 进行 时 肯定 是 要 从 数据 库 获 取 用 户 信 息 进行 匹配 的 ,而 这 个 获取 用 户 信 息 的 
任务 是 通过 Spring Security 的 UserDetailsService 组 件 来 完成 的 。 

在 security 包 下 新 建 一 个 UserDetailsServiceImpl 并 实现 UserDetailsService 接口 , 鹤 写 其 中 
的 方法 loadUserByUsername， 查 询 用 户 的 密码 信息 和 权限 信息 并 封装 到 UserDetails 的 实现 类 
对 象 ， 作 为 结果 JwtUserDetails 返回 给 DaoAuthenticationProvider 做 进一步 处 理 。 


UserDetallsServicelmpl.java 


/工区 

* 用 户 登 录 认 证 信息 查询 

* fauthor Louis 

* QAdate Jan 14, 2019 
En 

@Service 


Pupliec class UserDetailsServicelImpl implements UserDetailsService 1 


QAutowired 


Private SYSUSeTSerVvice SYSUSETSETVTLCE 


QOverride 
Public UserDetails loadUserByUsername (String username}) throws 
UsernameNotFoundException 1 
SysUser user = sysUserService.findBRyName (username}:; 
if (user == noll) 1 


throw new UsernameNotFoundException ("该 用 户 不 存在 "); 


} 
// 用 户 权 限 列 表 ， 根 据 权 限 标识 如 PreAuthorize ("hasAuthority('sys:menu:view"')") 
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// 标注 的 接口 对 比 ， 决 定 是 否 可 以 调用 接口 
Set<String> permissions = SVySsUserService.findPermissions (user.getName (}) }); 
List<GrantedAuthority> grantedAuthorities = permissions.streaml() 
.map (GrantedAuthorityImpl: :new) .collect (Collectors.toList()}}; 
return new JwtUserDetails (user.getName (}, user.getPassword(), 
User.gqgetSsaltil}, 


grantedAuthorities}); 


JwtUserDetails 是 对 认证 信息 的 封装 ， 实 现 Spring Security， 提 供 UserDetails 接口 ， 主 要 
包含 用 望 名、 密码、 加 密 盐 和 权限 信息 。 


JwtUserDetalls.java 


A 坟 坟 

* 安全 用 户 模 型 

* Qauthor Louis 

* Adate Jan 14, 2019 

Public class JwtUserDetails implements UserDetalils | 
private String usernames 
private String password; 
Private String salt; 


Private Collection<? extends GrantedAuthority> authorities; 


// 此 处 省 略 其 他 信息 


GrantedAuthorityImpl 实现 Spring Security 的 GrantedAuthority 接口 ， 是 对 权限 的 封 狼 ， 内 
部 包含 一 个 字符 串 类 型 的 权限 标识 authority， 对 应 菜单 表 的 perms 字段 的 权限 字符 串 ， 比 如 用 
户 管 理 的 增 、 删 、 改 、 答 权限 标记 sys:user:view、sys:user:add、sys:user:edit、sys:user:delete。 


GrantedAuthorlty|mplJava 


A 太太 

* 权限 封装 

* fauthor Louis 

* ldate Jan 14, 2019 

二 

public class GrantedAuthorityImpl implements GrantedAuthority I 


private String authority; 


Public GrantedAuthorityImpl (String authority)} { 
this.authority = authoritys 
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Public void setAuthority(String authority)} { 
this.authority = authority; 


QOverride 
public String getAuthority() f 


return this.authority; 


11.2.6 添加 权限 注解 

在 用 户 拥有 茶 个 后 台 接 口 访 问 权 限 的 时 候 才 能 访问 ， 这 叫 作 接口 保护 。 我 们 这 里 融通 过 
Spring Security 提供 的 权限 注解 来 保护 后 台 接 口 免 受 非法 访问 ， 这 里 以 字典 礼 理 模块 为 例 ， 其 
他 模块 同 理 。 

在 SysDictController 的 接口 上 洪 加 类 似 @PreAuthorize("hasAuthority('sys:dict:view"”") 的 注 
解 ， 表 示 只 有 当前 登录 用 户 拥 有 'sys:dict:view' 人 权限 标 识 才 能 访问 此 接口 ， 这 里 的 权限 标识 需 对 
应 沫 单 表 中 的 perms 权限 信息 ， 所 以 可 以 通过 配置 来 单 表 的 权限 来 灵活 控制 接口 的 访问 权限 。 


SysDIictController.java 


QRestcController 
QReaquestMapping ("dict") 
Puplic class SySsSDictController 1{ 


QAutowired 


private SvySsDictSservice svsDictServices 


QPreAuthorize ("hasAuthority('sys:dict:add') AND 
hasAuthoritvy(" sves:dict:edit"}") 

@PostMapping (value="/save") 

public HttpResult save (RReoquestBody SysDict record) I 


return HttpResult .ok(sysDictService.savelrecord})});s 


QPreAuthorize ("hasAuthority('sys:dict:delete")™) 
@PostMapping (value="/delete") 
public HttpResult delete (RequestBody List<SysDict> records) { 


return HttpResult .ok (sysDictService.delete (records})}); 


QPreAuthorize ("hasAuthority('sys:dict:view')") 
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@PostMapping (value="/findPage™) 
public HttpResult findPage (GRequestBody PageRequest pageRequest) 1{ 
return HttpResult .ok(sysDictService.findPage (pageRequest)})}; 


QPreAuthorize ("hasAuthority('sys:dict:view')") 

@GetMapping (value="/findByLable") 

public HttpResult findByLable (RequestParam String lable) 1{ 
return HttpResult .ok (sysDictSservice.findByLable(lable}))}; 


11.2.7 ” Swagger 添加 令 牌 参数 


由 于 我 们 引入 Spring Security 安全 框架 ， 接 口 受到 保护 ， 需 要 携带 合法 的 token 令 牌 (一 
般 是 登录 成 功 之 后 由 后 台 返 回 ) 才能 正 稼 访问 , 但 是 Swagger 本 喘 的 接口 测试 页 面 默 认 并 没有 
提供 传送 token 参数 的 地 方 ， 因 此 需要 简单 定制 一 下 ， 修 改 SwaggerConflig 配置 类 即 可 。 


SwaggerConfig.java 


/ 坟 太 
* Swagger 配置 

* Qauthor Louis 

* QAdate Jan 11, 2019 

SE 

QConfiqguration 
QEnableSwagger2 

public class SwaggerConfig 1{ 


GBean 

Public Docket createRestApi ()}{ 

// 添加 请 求 参数 ， 我 们 这 里 把 token 作为 请 求 头 部 参数 传 入 后 端 

ParameterBuilder parameterBuilder = new ParameterBuilder(}; 

List<Parameter> parameters = new ArrayList<Parameter> () 7 

parameterBuilder.name ("token") .description(" 令 有 牌 ") 

-modelRef (new ModelRef ("string"}) .parameterType ("header"). 
required (false) .build(}; 

parameters.add (parameterBuilder.build(}); 

return new Docket (DocumentationType.SWAGGER 2) .apiInifo(apiInfo()} .select (|) 

-aDliSs (RequestHandlerSelectors.any(}))}) .paths (PathSelectors.anyl()) 


-buildl() .globalOperationParameters (parameters)}); 


} 


private APiInfo apiInto(){ 
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return new ApilnfoBRuilder(}) .build(}; 


配置 之 后 ， 草 新 局 动 束 可 以 进行 传 参 了 ， 测试 接口 时 先 将 登录 接口 返回 的 token 复制 到 此 
处 即 可 ， 如 图 11-2 所 示 。Swagger 在 及 送 请 求 的 时 候 会 把 token 放 入 请 求 头 ， 后 续 坑 由 还 会 讲 
到 token 相关 的 内 容 。 


ar | /role/findALL findAll 
和 L cm | 


Deseriptien 


taoken - 仿 丞 


Execute 


图 11-2 


登录 接口 实现 


在 登录 控制 大 中 添加 一 个 登录 接口 logm， 在 其 中 验证 验证 码 、 用 户 名 、 密 人 码 信息 。 匹 配 
成 功 之 后 ， 执 行 Spring Secunity 的 登录 认证 机 制 。 登 录 成 功 之 后 ， 人 返回 Token 令 牌 攒 证 。 


SysLoginController.java 


f/f* 
* 登录 接口 
*/ 
QPostMapping (value = "/login") 
public HttpResult login (QRequestBody LoginBean loginBean, HttpServletRequest 
request)} throws IOException I 
String username = loginBean.getAccount ()}); 
String password = loginBean.getPassword(); 
String captcha = loginBean.getCaptcha (}; 
// 从 session 中 获取 之 前 保存 的 验证 码 ， 跟 前 台 传 来 的 验证 码 进行 匹配 
Object kaptcha = request.getSession() .getAttribute 
(Constants .KAPTCHA SESSION KEY); 
if (kaptcha == null)l 
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return HttpResult .error (" 验 证 码 已 失效 ") ; 
} 
if(!Icaptcha.equals (kaptcha)}1 

return HttpResult .error ("验证 码 不 正确 "); 
} 
// 用 户 信 息 
SYSUSeT user = SysUserService.findBRyName (username}s 
// 账号 不 存在 、 密 码 错误 
i {user == null) I 

return HttpResult .error (" 账 号 不 存在 ") ，; 
} 


It (!PasswordUtils.matches (user.getSsalt(), password, user.getPassword())) 1 
return HttpResult .error ("密码 不 正确 区 

} 

// 账号 锁定 

if (user.getSstatus() == 0) { 
return HttpResult.error (" 账 号 已 被 锁定 ,请 联系 管理 员 ") ; 

} 

// 系统 登录 认证 

JwtAuthentjcatjoToken token = SecurityUtils.1login(request, username, 

password, authenticationManager}; 


return HttpResult .ok(token}); 


我 们 这 里 将 Spring Security 的 登录 认证 逻辑 封装 到 了 工具 类 SecurityUtils 的 login 方法 中 ， 
认证 流程 大 致 分 为 下 面 4 个 步 又 ; 


(1) 将 用 户 名 密 公 的 认证 信息 封装 到 JwtAuthenticatioToken 对 象 。 

(2) 通过 调用 authenticationManager.authenticate(token) 执 行 认证 尝 程 。 
(3) 通过 SecurityContextHolder 将 认证 信息 保存 到 Security 上 下 文 。 

(4) 通过 JwtTokenUtils.generateToken(authentication) 生 成 token 并 返回 。 


有 共 体 过 程 详 见 代码 。 
SecurityUtils.java 


让 友 夫 
* 系统 登录 认证 

* param request 

* fparam username 

* param password 

* lparam authenticationManager 

*, 
public static JwtAuthenticatioToken login (HttpServietReaquest request, String 


USeTrname String password, AuthenticationManager authenticatijonManager) | 
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JwtAuthentijcatijoToken token = new JwtAuthenticatioToken (username, password); 
token.setDetails (new WebAuthenticationDetailsSource({(). 

buildDetails (request}}; 
// 执行 登录 认证 过 程 
Authenticatjon authentication = authenticationManager.authenticate (token}); 
// 认证 成 功 ， 和 存储 认证 信息 到 上 下 文 
SecurityContextHolder.getContext () .setAuthentication (authentication}); 
// 生成 令 脾 并 返回 给 客 尸 端 
token.setToken (JwtTokenUtils .generateToken (authentication}) ); 


return token:; 


关于 JwtTokenUtils 如 何 生 成 token 的 逻辑 参见 下 和 面 两 个 方法 。 
JwtiokenUtils.java 


NS 


/大 

* 生成 令 牌 

* Gparam userDetails 用 户 

* Q@return 令 牌 

*/ 

public static String generateToken (Authentication authentication) 1 
Map<string, Object> claims = new HashMap<> (3); 
claims .put (USERNAME, SecurityUtils.getUsername (lauthentication)}; 
claims.put (CREATED, new Date(}}); 
claims.put (AUTHORITIES, authentication.getAuthorities(}); 


return generateToken (claims}); 


A 太太 
* 从 数据 声明 生成 令 牌 
* lparam claims 数据 声明 
* Q@return 令 牌 
*/ 
private static String generateToken (Map<Sstring, Object> claims) { 
Date expirationDate = new Datet(lSYystem.currentTimeMililis{(} + EXPIRE TIME}; 
return Jwts.builder() .setClaims (claims}) .setExpliration (expirationDate) 
.SIgNWIith (SignatureAlgorithm.HSS12, SECRET) .compact (); 
| 


LoginBean 是 对 登录 认证 信息 的 简单 封 朔 ， 包 舍 账 亏 密 码 和 验证 码 信息 。 
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LoginBean.java 


1/ 去 去 
* 登录 接口 封装 对 象 
* @author Louis 
* Qldate Oct 29, 2018 
id 
public class LoginBean { 
private String account; 
private String password; 


private String captcha; 


// 此 处 省 略 getter 和 setter 


JwtAuthenticatioToken 继承 UsernamePasswordAuthenticationToken， 是 对 令 牌 信息 的 和 催 单 
封装 ， 用 来 作为 认证 和 授权 的 信任 赁 证， 其 中 的 token 信息 由 JWT 负责 生成 。 


JwtAuthenticatio Token.java 


A 太太 

* 目 定 义 令 有 牌 对 象 

* fauthor Louis 

* QAdate Jan 14, 2019 
Ey 


public class JwtAuthenticatioToken extends UsernamePasswordAuthenticationToken I 
private static final long serialVersionUID = lL; 


private String tokens; 


Public JwtAuthenticatioToken (Object principal, Object credentials)})l1 


super {iprincipal, credentials}s 


Public JwtAuthenticatioToken (ObJject principal, Object credentjals, String 
七 DKEm) { 

SuPer (principal, credentials});s 

this.token = tokens 


} 


PubBlICc JwtAuthenticatioToken (Object principal, Object credentials, Collection<? 
extends GrantedAuthority> authorities, String token) 1 
SUuper (principal, credentials, authorities);s 


this.token = token;: 
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// 此 处 省 略 setter 和 getter 


接口 测试 


编译 局 动 应 用 ， 访 问 http://localhost:8001/swagger-ui.html, 进入 Swagger 测试 页 面 。 

我 们 先 在 未 登录 的 情况 下 找 一 个 接口 来 测试 一 下 ， 检 测 接口 权限 保护 有 没有 生效 。 

我 们 选择 角色 管理 的 findAll 接口 进行 测试 ， 因 为 不 用 传 参 比较 方便 。 发 送 请 求 结果 人 返回 
403 错误 , 提示 “Access Denied ”信息 , 如 图 11-3 所 示 。 如 你 所 想 , 没 铬 , 这 个 束 是 Spring Security 
针对 缺少 访问 权限 的 错误 反馈 信息 ， 说 明 我 们 的 接口 已 经 受到 安全 框 染 的 保护 。 


Request URL 
https/ /Locelhost:88601 /roLe/fimiAlL 
Server response 


Code Details 


403 Error: 


Response body 


"tt1mestanp": "2019-—861—14T199:45:59.516100900", 
"Status"s: d483, 

error™s Forbidden®, 

EE Access Denlied™, 

path role/findAll® 


图 11-3 
接着 , 我 们 访问 一 下 验证 码 的 生成 接口 ,， 记 住 登录 验证 码 ， 然后 进行 登录 测试 ， 如 图 11-4 
所 示 。 


Request URL 


ey 
Server response 
Code Details 


200 


Response body 


adpe6 


图 11-4 


找到 登录 接口 ， 输 入 用 户 名 和 密码 ， 先 输入 一 个 错误 的 验证 码 ， 结 采 如 图 11-5 所 示 。 
然后 我 们 输入 用 己 名 验证 码 和 一 个 错误 的 蜜 但， 测试 一 下 ， 结 条 如 图 11-6 所 示 。 
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htip:/ /Localhost: B80 /Login 


Server response 


Code Details 


本 
2 Response body 


code®: S606, 
"msg": "验证 到 不 正确 "， 


“tt mL 


11-5 


Requwest URL 
http:/ /Localhost: 061 Losin 
SErver response 


Code Details 


200 Response body 


code™: S88 


"msg": " 率 科 不 正确 "， 


data™: mull 


11-6 


最 后 我 们 输入 正确 的 信息 ， 即 “用 户 名 : admin”“ 密 码 : admin” 及 上 一 步 生 成 的 验证 码 ， 
结果 如 图 11-7 所 示 。 


9 志 二 二 EE 0, 
-mE mL, 
"二 
"mthorities®s []; 
eails me 有 
"remoteAddress”: “8:8:0::H:0:g:1"; 
sessionld®: "2115556CBFGFIOCECEBSSOO0TIDCEQFD" 


false, 

"principal™s "sdain®, 

"Eredentials": "Bdnin™,. 

"tamen”: 
a Fa a 二 区 记 
NMiDLtTInFldiohvealbesIGInNScrptiW Sl OmRUbOVOrSIoLNsiviV OaG yaxRSIjoiclrOmmRpv 0 rRpdc I NsiV VG yaNRSIioicdlzr 
UmnRpY306ZGVSsDNRILIInNnGsey IhdRob3jpdkiOl jrexNMeY2oumlnOmFkZCILHsiv VeaGoYanlRsIilolicalrzOmllibnUusv RkIngsey JhdnRob3] 
PHIETOJzeXNGdIXNLejph7G0 SrInmnFldGhvenlOeSIInMSecrpki BmRLbD VS I MsiViV GYyaRSIJo cnIvbGus Rp 
siviVeaGdyaNRsSIioic3lzOnjvbel6dnl LdyJS LisiT VaG yaRsIiioic3lrOnRpY306dnlLdy J LHsivNVa GYyaRs iiloiclzinV er 
GV3ZXRLUInNnGseyJhdiRob3IJpdHki01 IzeMNGZGV dDp2aNV3InGseyJhdXRob3JpdHki01JzeNGb dip2aNV iIneseyJIhdRob3IpdHki01 
证 人 有 
SI]JOlc3LFEONRLUONOGZWRPICI9LHSIYIVBaGIYyaRSIjolc3UriOnNvbarprrplGLeInesey I dRob3IJpIKi01JEeMGbGemanNs sb ccdnl Udy 
]9LMHsiYXVBaG9waxRsITjoic3tLzOnvzZKI6ZWRpdCJo9LHsiYXVeBaG9yaxRsTjoic3LzOmNvbamzpzzp2zawV3Inesev]hdxRob3]pdHki0i]JzeXMN6Y 
29UZ7mUnO0naRlbovers oHNsiviveaGoYyams iijoic3 lzOnRlL HQ0evaRkIinGsey JhniNRob3Ipdlkio0ijrzexNicndsiipokiN Ld TS TInF Loichy 
cmliesIGINnNNSerptrnS lO a JPyTOV kudhaRNIYVkATIbb LeVvekBoBnsonUncbe2I1]- 
LT LE LT FL 可 本本 省 而 | rsetoH=BiDs, 


Ey, 
可 以 看 到 登录 成 功 之 后 返回 的 登录 认证 信息 ， 其 中 包含 JWT 生成 的 token 令 牌 。 后 续 访 
问 南 要 携 市 此 token 作为 凭证 进行 接口 访问 。 
复制 此 处 生成 的 token 信息 〈“token” 属 性 的 长 字符 串 ) ， 再 次 找到 角色 管理 的 findAll 
接口 ， 把 复制 的 token 信息 粘贴 到 token 令 牌 参数 输入 框 内 ， 如 图 11-8 所 示 。 
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er | jrole/findAlL finda 


Parameters tancel 


Nie Descripuon 


toren 


令 牌 


| 


[{ EF 


EyJhbGciOUIUzUxMiU9.eyjzdWiliDUhzG1p 


11.8 
单 击 Execute 按钮 友 送 但 何 请求， 友 现 成 功 地 返回 了 角色 数据 ， 结 果 如 图 11-9 所 示 。 


Request URL 


Gealhastandl /rele/TinalaAll 
Server response 


Code Detnils 


yr 
200 Response body 


"Code" 2 
sms ml 
生动 面 必 面倒 5 【| 
| 
了 
Er 人 etbety ss ein® ， 
"Ereatel ine™s "2A01D -Be—14T03:11:1L. 00800+G000", 
LestipdateBy "=: “dain™. 
“LastUpdaterine": "2018=09=-23T11:07:18. G00090", 
ls 
"renark": “拓扑 管 理 员 ”， 


elF lag" i 


11-9 


回 到 登录 接口 ， 换 一 个 用 户 登 录 (“用 户 名 : zhugeliang”“ 密 码 : 123”) ， 因 为 这 个 用 
户 有 分 配角 色 权 限 但 没有 分 配对 单 权限 , 所 以 如 果 权 限 注解 接口 保护 正常 , 那么 此 用 户 访 问 角 
色 接 口 正常 〈( 见 图 11-10) ， 但 访问 菜单 相关 接口 会 返回 403 错误 ( 见 图 11-11) 。 


curl 一 其 GET "https/ /Localhost: B60 role/findAll™” =H “accepts /fs MH tokens: 

ey hoci0jIUa NMI eyjzdali0i jhalVniip inl wi Til onNTONTAMTO LOITEnNh dev IiorNTONmDY moToOrODY LOhdiRGby ji Le 
Gui3s1VYiaGoqrannSleocdl OYAlGdal dy LHsYiViOaGS ralolcdl Oa balplrplaNV3Indsey iMmob3 jpdhiki0 renNat I GVO a 
Inoaey IR IJNki0l IEEenNGdNlelp a UIT LIaF ld esldeslG LIM eis NVaG aR Iioled lO ter rp 
haylrsTIaFldlhvenlheslGlnNSerpy iliprlrsuT LaF li vmldes leln NM cplbi SaderinpdC Ng 。 salvBe 
ranslsaTjLPrqTemtVs ratnil HIInBabeniivalLip Sr=-dfOnjormnToedIiolnAocRHtic =WUCKA" 


Reqwest URL 


httpii /Vocalhost: Be /roLe/ indAll 


Server respornye 


Detalls 


Respeonse body 


下 史 十 二 过 性 本 ， Es 
中 本 面 生 画 到 E 【 
| "ss 1, 


erenteBy™s "mlnin™, 
ETEteEl 1 “281441903:11 :1 .W000 


图 11-10 
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1 = FT "mittne rll hnst NN /mr iT re =H 而 和 一 和 二 位 nn 
Fhbs eo ILTUz 人。 Fs NTO JIG HA pt EY rp Ch 30 MT NTABNTOY LC er- Widjs 二 OvaLCGIhadrnRcby. Jed Lewl 
BiH35 YIVOnG ya NHSIjs 1c3lU OnVriNLGdnlldy JILHsiTAIVOnG oansI]s ic3l rzOnli ba pirpannVvV3lneseYy Ih i Ro paHk 101Iz ri Wp NV 
LNGseYw.JhdNNobs jpdHik i101 jz LEE HL 有 二 pkrit dt iT rimF LdGhyv cnloesi6InNs EN JS iTVEmy a Ijaoic alrUnNvbai pe 
hz PonifsriimFldGhwvanleesi6IniScpm vbalnipiicifsaTinF Id vcnlorSi6IintScrpibtlSmier pd I. wmlLyvli 
LE 


Request URL 


ttpse Uocnlhosts 


Details 


Error: 


=s “68619-081-=-14119:18:186.B44+0000" 


接口 调用 失败 


图 11-11 


虽然 是 同一 用 户 携 之 同一 令 有 牌 , 但 只 有 拥有 权限 的 接口 才能 访问 , 没有 权限 的 接口 不 允许 
访问 。 


so Spring Security 执行 流程 剖析 


Spring Security 功能 蝇 大 ， 使 用 也 稍 显 复杂 ， 因 为 涉及 的 内 容 比 较 多 ， 所 以 入 门 门 格 也 比 
较 噩 ,很 多 从 业 人 员 深 受 其 烦 , 不 少 人 束 拭 跟 看 网 上 教程 会 用 项 目 采 例 了 ,但 是 迪 到 问题 还 十 
措 不 独 头 脑 ， 这 都 是 因为 对 其 执行 法 程 不 熟 林 造成 的 。 

由 于 源码 分 析 文 章 需 要 选取 大 量 代码 和 图 片 ， 一 是 会 占用 大 量 遍 幅 ， 二 是 代码 需要 届 膨 标注 
的 地 方 用 纸 质 图 书 不 好 体现 ， 因 此 这 里 附 上 本 人 博客 的 一 篇 剖析 文章 ， 通 过 人 退 踩 与 解读 源 但 的 方 
式 为 读者 详细 误 析 Spring Security 的 执行 流程 。 熟 悉 整 个 流程 之 后 ， 许 多 问题 都 可 以 迎刃而解 了 ， 
有 兴趣 的 读者 可 以 目 行 租 讽 : https:/www.cnblogs.com/xifengxiaoma/p/10020960.html。 
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据 钾 份 让 穆 


在 很 多 时 候 , 我 们 需要 对 系统 数据 进行 备份 还 原 。 当 然 , 实际 生产 环境 的 数据 备份 和 还 原 
通 币 是 由 专业 数据 库 维护 人 员 在 数据 库 端 通过 命令 执行 的 .这 里 提供 的 是 通过 代码 进行 数据 备 
份 , 主要 是 方便 一 些 日 常 的 数据 恢复 , 比如 说 想 把 数据 恢复 到 某 一 世界 节点 的 数据 。 这 一 章节 ， 
我 们 讲解 如 何 通过 代码 调用 MySQL 的 备份 还 原 命 令 实现 系统 备份 还 原 的 功能 。 


二 加 
8 | 
新 建 工 程 
新 建 mango-backup 工程 ， 这 是 一 个 独立 运行 于 admin 的 服务 模块 ， 可 以 分 开 独 立 部 着 ， 
如 图 12-1 所 示 。 
wv Nu > i ngo-backup [mango dev] 
加 :> srd/main/java 


EE > src/ main/resources 


EE src/test/Java 


到 JRE System Library [JavaSE-1.8] 
BB Maven Dependencles 

Es > Src 

E> target 

I pom.xml 


图 12-1 


添加 依赖 
在 pom 文件 中 添加 以 下 相关 依赖 ， 主 要 包含 web、swagger 和 common 依赖 包 。 


pom.xml 


<dependencies> 
< 一 一 Spring boot 一 一 > 
<dependency> 
<groupId>org.springframework.boot</groupId> 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


<artifactId>spring-boot—starter—web</artifactId> 


</dependency> 
所 上 一 一 Swagger 一 一 > 


<dependency> 
<groupId>io.springfox</grouplId> 
<artifactId>springfox—-swagger2</artifactId> 


<VeErsion>?2.9.2</versiony> 


</dependency> 


<dependency> 
<grouplId>io.springfox</grouplId> 
<artifactId>springfox-swagger-ui</artifactId> 


<VeErsion>?2.9.2</versiony> 


</dependency> 


<dependency> 
<gqroupId>com.louis</groupId> 
<artifactId>mango-common</artifactId> 


<Version>1.0.0</versiony> 


</dependency> 


</dependencies> 


nl ， 和 
TT mw 1 人 
We “YY 
霹 | '” 
| | 每 1 


在 配置 文件 中 添加 以 下 配置 ， 定 义 司 动 哨 口 为 8002、 应 用 名 称 为 mango-backup， 和 定义 系 


统 数据 备份 还 原 的 数据 库 连 接 信息 。 
application.yml 


# 七 omcat 


3 VETs 


port: 8002 


SpIing: 
applicatjion: 
name: mango—-backup 


# backup datasource 


mango: 
backup: 
datasource: 
host: localhost 


userName: IrIoot 


password: 123456 


database: mango 
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目 定 Banner 


在 resources 目录 下 添加 一 个 目 定 义 banner.txt 文件 ， 通 过 字符 生成 网 站 生成 并 输入 以 下 


1 ) 。 

ET / 时 A et 
J RE ON 
7 CE a 

Ee J 
二 二 二 二 二 = 二 = 二 Mango Application === Version: 1 .0 ========= 


局 动 类 


修改 局 动 类 为 MangoBackupApplication， 指 定 包 扫 摘 路 径 为 com.louis.mango。 
MangoBackupApplication.java 


QSspringBootApplication(scanBasePackages={"com.louis.mango™}) 


public class MangoBackupApplication { 


public static void main(String[] args) 1{ 


SpringApplicatijon.run (MangoBackupApplication.class, args)}); 


跨 域 配置 
在 config 包 下 深 加 足 域 配置 类 ， 前 面 章 贡 己 经 提 及 ， 这 里 不 册 仁 述 。 
CorsConfig.java 


public class CorsConfig implements WebMvycConfiqurer { 


AOverride 


Public void addCorsMappings (CorsReglistry registry) I{ 
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registry.addMapping("/**") // 允许 跨 域 访 问 的 路 径 

.allowedorigins ("™*") // 人 允许 跨 域 访问 的 源 

.al lowedMethods ("EOST", "GET", "PUT", "OPTIONS", DOETETE /J/ 多 评 硼 求 方法 
.maxAge (168000) // 预 检 间隔 时 间 

.allowedHeaders ("*") /// 允许 头 部 设置 

.allowCredentials (true}); // 是 否 发 送 cookie 


Swagger 想 午 


在 config 包 下 添加 Swagger 配置 类 ， 前 面 章节 已 经 提 及 ， 这 里 不 册 发 述 。 
SwaggerConfig.java 


QConfiaguration 
QEnableSwagger2 
public class SwaggerConfig 1 


@Bean 
Public Docket createRestApi () 1L| 
return new Docket (DocumentationType.SWAGGER 2) .select () 


-Apis {RequestHandlerSelectors.any(})} .paths (PathSelectors.any(})} .build(}s; 
} 


一. 局 数据 源 属性 
谎 加 一 个 数据 源 属 性 配置 关 , 配置 @ConfigurationProperties(prefix = "mango.backup.datasource") 
注 艇 ， 这 样 束 可 以 通过 注入 BackupDataSourceProperties 读 取 数据 源 属性 了 了。 
BackupDataSourceProperties.java 


QComponent 
QConfiqgurationPproperties (prefix = "mango.backup.datasource™") 


public class BackupDataSourcePpProperties { 
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private string hosts 
private String userName; 
private String password; 


private string database; 


// 此 处 省 略 getter 和 setter 


备份 还 原 接口 


第 12 章 数据 备份 还 原 


在 service 包 下 添加 一 个 MysqlBackupService 接口 ， 包 含 backup 和 restore 两 个 接口 ， 分 


别 对 应 备份 和 还 原 的 接口 。 
MysqlBackupService.java 


吉 吉 
* _ MySQL 命令 行 备 份 恢复 服务 
二 fauthor Louis 
* ldate Jan 15, 2019 
Ee 
public jnterface MysqlBackupService I 


/去 夫 

* 备份 数据 库 

* param host host 地 址 ， 可 以 是 本 机 也 可 以 是 远 
* param userName 数据 库 的 用 户 名 

* Q@param password 数据 库 的 密码 

* Q@param savePath 备份 的 路 径 

* Q@param fileName 备份 的 文件 名 

* param databaseName 需要 备份 的 数据 库 的 名 称 
* QTFretun 

* @throws IOException 

7 


程 


boolean backup (String host, String userName, String password, 


String backupFolderPpath, String fileName, 


/大 
* 恢复 数据 库 


string database) throws Exception; 


* Q@param restoreFilePath 数据 库 备 份 的 脚本 路 径 


* Q@param host IP 地 址 


* param database 数据 库 名 称 


* Qparam userName 用 户 名 


113 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


* Q@param password 密码 

* QAreturn 

* 

boolean Trestore (String restoreFilepPath, String hosty StTtring userName, String 
password, 


String database) throws Exception; 


备份 还 原 实现 


在 service.impl 包 下 添加 MysqlBackupServiceImpl1， 实 现 backup 和 restore 两 个 接口 。 


MysdqlBackupservicelmplJava 


QSeTrVvice 


public class MysqlBackupServicelImpl implements MysqgqlBackupService 1{ 


QOverride 
Public boolean backup (String host, String userName, String password, String 
backupFolderPath, String fileName, 
String database} throws Exception { 
return MySqlBackupRestoreUtils.backup (host, userName, password, 
backupFolderPath, fileName, database)}); 
} 


QOverride 
Public boolean restore (String restoreFilePath, String host, String userName, 
String password, String database) 
throws Exception { 
return MySqlBackupRestoreUtils.restore(restoreFilePath, host, userName, 
password, database),; 


} 


备份 还 原 有 逻辑 


为 了 方便 复 用 ， 我 们 将 系统 数据 备份 和 还 原 的 逻辑 封装 到 MySqlBackupRestoreUtils 工 
有 具 类 ， 主 要 是 通过 代码 调用 MySQL 的 数据 库 备 份 和 还 原 命 令 实 现 ， 详 见 代 码 和 注释 。 


114 


第 12 章 数据 备份 还 原 


12.11.1 数据 备份 服务 
backup 是 数据 备份 服务 ， 读 取 数 据 源 信息 及 备份 信息 生成 数据 备份 。 
MySqlBackupRestoreUtils.java 


/大 
备份 数据 库 

* Gparam host host 地 址 ， 可 以 是 本 机 也 可 以 是 远程 
* Qparam userName 数据 库 的 用 户 名 

* param password 数据 库 的 密码 

* Qparam savePath 备份 的 路 径 

* G@param fileName 备份 的 文件 名 

* fparam databaseName 需要 备份 的 数据 库 的 名 称 
* Qthrows IOException 

*/ 


public static boolean backup (String host, String userName, String password, String 


站 


backupFolderPath, String fileName, String database) throws Exception 1 
File backupFolderFile = new File (backupFolderPath)}); 
if (ibackupFolderFile.exists(}} 1{ 
// 如 果 目 录 不 存在 则 创建 
backupFolderFile.mkdirs (); 
} 
i (ibackupFolderPath.endsWith (File.separator) 
&& lbackupFolderPath.endsWitn(™/")) f 
backupFolderPath = backupFolderPath + File.separator; 
} 
// 拼接 命令 行 的 命令 
String backupFilePath = backupFolderPath + fileName; 
StringBuilder stringBuilder = new StringBuilder 1) : 
stringBuilder.append("mysqldump opt ") .append(” -add—drop—database "). 
append(™” -add—drop—table ™}:; 
stringBuilder.appendl(™” -hh"} .append (host)}) .appendl(™” -u" ) .append (userName). 
append ( -p") .append (password); 
stringBuilder.append(™” result-—file="} .append (backupFilePath} .appendl(” 
-—default-—character—set=utf8 "}) .append (database}); 
// 调用 外 部 执行 exe 文件 的 Java API 
Process process = Runtime .getRuntime () .exec (getCommand 
(stringBuilder.tosString())); 
if (process.waitFor() == 0) f 
// 0 表示 线程 正常 终止 
system.out.println ("数据 已 经 备份 到 “+ backupFilePath + ™ 净 件 中 ") - 
return truers 


} 


return false:; 


1 名 
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12.11.2 ”数据 还 原 服 务 
restore 是 数据 还 原 服务 ， 读 取 数 据 源 信息 和 还 原版 本 进行 数据 还 原 。 
MySglBackupRestoreUtils.java 


/大 
* 还 原 数据 库 
* Q@param restoreFilePath 数据 库 备 份 的 脚本 路 径 
* G@param host IP 地 址 
* Q@param database 数据 库 名 称 
* Q@param userName 用 户 名 
* Q@param password 密码 
* 
public static boolean restore (String restorerFilePath, String host, String userName, 
String password, String database) throws Exception 1 
File restoreFile = new File (restoreFilePath)}); 
1f (restoreFile.1sDirectory(}} 1{ 
for (File file : restoreFile.l1istFiles(}) { 
i {file.existsi(} && file.getPath(}) .endsWith(" .sql™)})} 1{ 
restoreFilePath = file.getAbsolutePathl(})s 


break; 


} 
StringBuilder stringBuilder = new StringBuilder () : 
stringBuilder.append("mysgl -h"} .append (host) .append(” —u") .append (userName)}). 
append (” -p") .append (password); 
stringBuilder.append("” ") .append (database) .append ("<") .append (restoreFilePath); 
try 1 
Process process = Runtime.getRuntime () .exec (getCommand 
(stringBuilder.toSstring())); 
if (process.waitFor() == 0U) { 
System-out .println ("数据 已 从 ”十 restoreFilePath + ” 导入 到 数据 库 中 ") ; 
} 
} catch (IOExceptijion e) I 
.printSstackTrace tt) >: 
relturn falses 


} 


return true; 
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备份 还 原 控 制 器 
在 controller 包 下 新 建 一 个 控制 器 ， 备 份 还 原 控 制 器 对 外 提供 数据 备份 还 原 的 服务 ， 包 含 
以 下 几 个 接口 。 


12.12.1 数据 备份 接口 
backup 是 数据 备份 接口 ， 读 取 数 据 源 信息 及 备份 信息 生成 数据 备份 。 
MySqlBackupController.java 


@GetMapping ("/backup") 
public HttpResult backup() 1 
String backupFodlerName = BackupConstants.DEFAULT BACKUP NAME + ™ ~ 
+ (new SimpleDateFormat (BackupConstants .DATE FORMAT)) .format (new 
Date (yl)s 


return backup (backupFodlerName)}); 


private HttpResult backup (String backupFodlerName) 1{ 
String host = properties .getHost (); 
String userName = properties .getUserName (}); 
String Password = properties.getPassword(}; 
String database = properties.getDatabase (}); 
String backupFolderPath = BackupConstants .BACKUP FOLDER + backupFodlerName 
+ File.separator; 
String fileName = BackupConstants.BACKUP FILE NAME.; 
try 1 
boolean success = mySsSqlBRackupService.backup (host, userName, password, 
backupFolderPath, fileName, database); 
if(Isuccess) 1{ 
HttpResult.error ("数据 备份 失败 i 
} 
} catch (Exception ee) I 
return HttpResult .error(00, e.getMessage (})}:; 
} 
return HttpResult.ok()}); 


12.12.2 ”数据 还 原 接口 
restore 是 数据 还 原 接口 ， 读 取 数 据 源 信息 和 还 原版 本 进行 数据 还 原 。 
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MySqlBackupController.java 


QGetMapping ("/restore") 
public HttpResult restore (RequestParam String name) throws IOException 1{ 
String host = properties.gqgetHost(})s; 
String userName = properties.getUserName ()}); 
String password = properties .getPassword()}); 
String database = properties .getDatabase (}; 
String restoreFilePath = BackupConstants.RESTORE FOLDER + name; 
try 1 
mysqlBackupService.restore (restoreFilePath, host, userName, password, 
database); 
} catch (Exception e) I 
return HttpResult.error(300, e.getMessage ()); 


} 
return HttpResult.ok(); 


12.12.3 ”查找 备份 接口 
findRecords 是 备份 查找 接口 ， 用 于 伍 找 和 问 用 户 展示 数据 备份 版 本 。 
MySglBackupController.java 


QGetMapping ("/findRecords") 
public HttpResult findBackupRecords() 1 
if(Inew File(BackupConstants .DEFAULT RESTORE FILE) .exists())} { 
// 初始 默认 备份 文件 
backup (BackupConstants .DEFAULT BACKUP NAME.); 
} 
List<Map<sSstring, String>> backupRecords = new ArrayList<>();} 
File restoreFolderFile = new Flile(BackupConstants.RESTORE FOLDER); 
ift (restoreFolderFile.exists()) I 
for(File file:restoreFolderFile.l1listFiles()) 1({ 
Map<String,: String> backup = new HashMap<> (); 
backup.put ("name", file.ogetName(}}:; 
backup-.put ("titlje"”, file.oetName (}}» 


if (BackupConstants .DEFAULT BACKUP NAME .equalslgnoreCase (file.getName(})} I 
backup.put ("title"， "系统 默认 备份 "); 
} 
backupRecords.add (backup); 
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// 排序 ， 默 认 备 份 最 前 ， 人 然后 按时 间 惟 排序， 新 备份 在 表面 
backupRecords .sort((ol, o2} 一 > 
BackupConstants.DEFAULT BACKUP NAME .equalsIgnoreCase (ol .get ("name"}} > 一 


BackupConstants .DEFAULT BACKUP NAME .equalslgnoreCase(o2.get ( name )) ?1: 
Oz.get ("name") .compareTo(ol .get("name™})}))}); 


return HttpResult .ok (backupRecords)}.; 


12.12.4 删除 备份 接口 
delete 是 备份 删除 接口 ， 通 过 备份 还 原 定 理 寞 面 删除 数据 备份 版 本 。 
MySqlBackupController.java 


QGetMapping ("/delete"™) 
public HttpResult deleteBackupRecord (RequestParam String name) 1{ 
if(BackupConstants .DEFAULT BACKUP NAME.equals (name)}))} 1{ 
return HttpResult .error ("系统 默认 备份 无 法 删除 ! 人 
} 
String restoreFilePath = BackupConstants.BACKUP FOLDER + name 


try 1 

FileUtils.deleteFile (new File(restoreFilepath)); 
} catch (Exception e) 

return HttpResult .error(o00, e.getMessage (lj :> 


} 
return HttpResult.ok(); 


接口 测试 


编译 局 动 应 用 ， 运 行 MangoBackupApplication， 访 问 http://localhost:8002/swagger-ui.html#/， 
进入 Swagger 接口 测试 页 面 ， 如 图 12-2 所 示 。 


my-sql-backup-controller My sql Backup Controller 


| 太古 /backup/backup backup 
| [| /backup/delete deleteBackupRecord 


于 /backup/findRecords findBackupRecords 
| = /backup/restore restore 


图 12-2 


119 


Spring Boot+Spring Cloud+Vue+Element 项 目 实战 : 手把手 教 你 开发 权限 管理 系统 


首先 ， 调 用 以 下 findRecords 接口 ， 友 现 返 回 了 一 条 “系统 默认 备份 ”数据 ， 这 是 因为 我 
们 为 了 保证 系统 至 少 保留 一 条 备份 而 自动 生成 的 备份 , 生成 逻辑 是 每 次 在 查找 备份 的 时 候 , 如 
果 发 现 系 统 不 存在 “系统 默认 备份 ”， 就 会 利用 当前 数据 库 数据 生成 一 条 “系统 默认 备份 ”， 
如 图 12-3 所 示 。 


Request URL 

http:/ /Localhost:80902 /backup/fTindRecords 
IErver response 
code Details 


<00 Response body 


图 12-3 
生成 备份 圾 要 存储 成 SQL 文件 ,备份 文件 的 存储 目录 是 : 系统 用 户 目 录 /_mango_backup。 
在 mango backup 目录 下 会 存储 很 多 目录 , 每 个 目录 代码 一 个 备份 版 本 , 目录 下 面 束 是 该 版 本 
的 SQL 文件 。“ 系 统 默 认 和 备份” 目录 名 为 “mango”， 普 通 备 份 目录 名 为 “mango 时 间 惟 ”。 
目 动 生 成 的 “系统 默认 备份 ”版 本 文件 如 图 12-4 所 示 。 


》 Ties 卓 a mm a 二 3 _mango backup > backup 


Name 系统 用 二 自 了 Date modified Type 


mango.sql 1715/2019 11:19 SQL File 


12-4 


接着 调用 一 下 备份 接口 ， 果 不 其 然 , 生成 了 一 份 “mango 时 间 惟 ”的 备份 目录 ， 如 图 12-5 
所 示 。 


oe 认 。 aa 机 » _mango_backup 


Name Date moedred Type 


1/132019 11:19 File folder 
1/13/2019 11:32 File folder 


图 12-5 


然后 输入 新 生成 的 备份 目录 名 称 ， 调 用 删除 备份 接口 ， 如 图 12-6 所 示 。 
查看 备份 存储 目录 ， 发 现 刚 才 新 生成 的 备份 目录 已 经 成 功 被 删除 了 ， 如 图 12-7 所 示 。 
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Name Deseriptian 


name”™ required 站 本 站 1 下 


string backup 2019-01-15 113211 


(query,) 


图 12-6 


mil BR _rmango backup 
Ea] 


Name Date modifred Type 


[i backup W32019 11:19 File folder 


图 12-7 


现在 ， 我们 来 测试 一 下 数据 还 原 ， 先 把 数据 里 的 表 全 部 删除 ,通过 命令 行 或 工具 部 行 ， 如 
图 12-8 所 示 。 


时 打开 表 于 设计 表 大 新 建 打 大 型 除 表 | 区 导入 向 导 国 导出 向 导 


图 12-8 


然后 找到 数据 还 原 接口 ， 输 入 备份 目录 名 称 ， 比 如 系统 默认 备份 是 backup， 如 图 12-9 所 示 。 
[= /backup/restore restore 


Parameters 


备份 目录 和 名称 


Narmme Deseriptien 


name * required name 


strinmeg 


: backup 


[guery) 


图 12-9 
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执行 成 功 之 后 , 合 看 并 刷新 一 下 数据 库 , 友 现 锌 我 们 删除 的 数据 库 表 和 数据 虱 成 功 恢 复 回 
来 了 ， 如 图 12-10 所 示 。 


12-10 
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Spring Boot Admin 是 一 个 管理 和 监控 Spring Boot 应 用 程序 的 开源 监控 软件 ， 针 对 
spring-boot 的 actuator 接口 进行 UI 美化 并 封装 , 可 以 在 管理 界面 中 浏览 所 有 被 监控 spring-boot 
项 目的 基本 信息 ， 详 细 的 Health 信息 、 内 存 信息 、JVM 信息 、 垃 圾 回收 信息 、 各 种 配 前 信息 

(比如 数据 源 、 绥 存 列 表 和 命中 率 ) 等 ， 还 可 以 直接 修改 logger 的 level，Spring Boot Admin 
提供 的 丰富 详细 的 监控 信息 给 Spring Boot 应 用 的 监控 、 维 护 和 优化 都 带 来 了 极 大 的 便利 。 

本 章 束 给 大 家 介绍 如 何 使 用 Spring Boot Admin 对 Spring Boot 应 用 进行 监控 。 


新 建 工程 


新 建 一 个 mango-monitor 项 目 ， 作 为 服务 监控 服务 昕 ， 工 程 结构 如 图 13-1 所 示 。 


v3 > mango-monitor [mango dev] 


w 区 3 > src/main/Java 
w 名 > comlouismango.monitor 
号 MangoMonitorApplication,java 
ww (> src/main/resources 
忆 application.yml 
EB banner.txt 
切 src/test/java 
BN JRE System Library [JavaSE-1.8] 
BB Maven Dependencies 
EE > STC 
EE target 
I pom.xml 


图 13-1 


添加 依赖 


在 pom 文件 中 添加 以 下 依赖 包 ， 主 要 是 Spring Boot 和 Spring Boot Admin 依赖 。 


pom.xml 


<1—— spring boot 一 一 > 


<dependency> 
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<gTroupId>org -spPringdftTramework -bpoot</7groupId> 
<artiftactId>spring-boot 一 starter</artifactIQ> 

</dependency> 

<1——spring—boot—admin——> 

<dependency> 
<groupld>de.codecentric</groupld> 
<artifactId>spring-boot-admin—server</artifactId> 
<Version>2.1.2</Vversion> 

</dependency> 

<dependency> 
<gqrouplId>de.codecentric</grouplId> 
<artifactId>spring-boot-admin—server-ui</artifactId> 
<Version>2.1.2</version> 


</dependency> 


在 配置 文件 中 添加 配置 ， 指 定局 动 端口 为 8000、 应 用 名 称 为 mango-monitor。 


application.yml 


= 
port: 8000 
SpIring: 
applicatjon: 


name: mango—~monitor 


| 四 二 f \ : 目 = v B 
by | " | 
四 》 EX Banner 


在 resources 目录 下 这 加 banner txt 文件 ， 生 成 banner 宁 符 并 与 入 。 


ME INC 时 _ es 
A 
5 


a DO 
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局 动 类 


修改 局 动 类 为 MangoMonitorApplication 并 在 头 部 添加 @EnableAdminServer 注 和 解 ， 开 局 监 
探 服 务 a 
MangoMonitorApplication.java 


QEnableAdminServer 
QSpringBootApplication 


public class MangoMonitorApplication | 


public static void main(Sstring[|] args) 1{ 


SPIjngApplicatjon.runl(MangoMonitorApplication.class, args}); 


局 动 服务 病 


编译 局 动 MangoMonitorApplication， 访 问 http://localhost:8000， 进入 应 用 监控 界面 ， 如 
13-2 所 示 。 


9% Spring Boot Admin 


图 13-2 


监控 客户 庙 


现在 管理 界面 应 用 和 实例 都 是 0， 因 为 还 没有 监控 客户 问 被 注册 ， 接 下 来 我 们 束 把 后 台 服 
务 mango-admin 和 数据 备份 还 原 服 务 mango-backup 注册 到 监控 服务 。 
分 别 在 mango-admin 和 mango-backup 的 pom 文件 中 添加 监控 客户 端 依赖 。 
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pom.xml 


<1——spring—boot—admin—client > 

<dependency> 
<grouplId>de.codecentric</grouplId> 
<artifactId>spring-boot-admin—starter-client</artifactId> 
<Version>2.1.2</version> 


</dependency> 


分 别 在 mango-admin 和 mango-backup 的 配置 文件 中 配置 服务 监控 信息 。 主 要 是 指定 监控 
服务 器 的 地 址 ， 男 外 endpoints 是 开放 监控 接口 ， 因 为 处 于 安全 的 考虑 ，Spring Boot 默认 是 没 
有 开放 健康 检查 接口 的 ， 可 以 通过 endpoints 设置 开放 特定 的 接口 ，“*” 表 示 全 部 开放 。 


application.yml 


SpIr1ing: 
Boot: 
admin: 
Cliemt: 
url: "http://localhost:8000" 
management: 
endpoints: 
web: 
Ensonres 


1ncClude: ™*™ 


局 动 害 尸 病 


客户 吴 添加 服务 监控 之 后 ， 分别 编 译 局 动 mang-admin 和 mango-backup。 注 意 ， 在 此 之 前 
请 保证 mango-monitor 服务 已 经 司 动 。 客 己 问 局 动 之 后 ， 服 务 监 控 者 面 如 图 13-3 所 示 。 


3 Spring Boot Admin 


INSTANCES STATUS 


2 all up 


ww Mango-admin 


13-3 
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系统 服务 监控 


Wallboard 页 面 按 六 边 形 块 展示 当前 监控 的 应 用 ， 如 图 13-4 所 示 。 


Spring Boot Admin 


图 13-4 


单 击 应 用 进入 应 用 监控 详情 页 面 ， 我 们 可 以 看 到 各 种 应 用 监控 信息 ， 比 如 应 用 环境 、 处 理 
锅 信 息 、 线 程 信息 、 类 加 载 、 堆 栈 使 用 和 坪 圾 回收 情况 等 ， 如 图 13-5 所 示 。 


mango-admin 


ce i Tem red 


图 13-5 


为 外 ， 还 有 请 如 服务 上 线 日 忘 守 ， 功 能 丰 襄 ， 有 兴趣 的 读 痢 可 目 行 探 完 ， 如 图 13-6 所 示 。 
3 Spring Boot Admin 


Event Journal 


Application Instance Time Event 


mango-backup eebee0D21c479 201901/15 14-56-28.432 ENODPOINTS_DETECTED 


mango-backup eebee021c479 2019/01/15 14:56-28.380 STATUS_CHANGED(UA 


mango-bacxup EebeeD21c479 2019/01/15 14:56-27.933 REGISTERED 


图 13-6 
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什么 是 Consul 


Consul 是 HashiCorp 公司 推出 的 开源 工具 ， 用 于 实现 分 布 式 系统 的 服务 发 现 与 配置 。 与 
其 他 分 布 式 服 务 注册 与 发 现 的 方案 相 比 ，Consul 的 方案 更 “一 站 式 ”， 内 置 了 服务 注册 与 发 
现 框架 、 分 布 一 致 性 协议 实现 、 健 康 检 查 、Kev/Value 存储 、 多 数据 中 心 方案 ， 不 再 需要 依赖 
其 他 工具 (比如 ZooKeeper 等 ) 。 使 用 起 来 也 较为 答 单 。Consul 使 用 Go 语言 编写 ， 因 此 
具有 天 然 可 移植 性 〈 文 持 Linux、Windows 和 Mac OS X) ; 安装 包 仅 包 舍 一 个 可 执行 文件 ， 
方便 部 着， 与 Docker 等 轻 量 级 容 囊 可 无 颖 配合 。 


Consu| 安装 


访问 Consul 官网 , 根据 操作 系统 类 型 , 选择 下 载 Consul 的 最 新 版 本 。 这 里 选择 Windows 
1.4.0 版 本 ， 如 图 14-1 所 示 。 下 载 地 址 为 https://www.consul.io/downloads.html。 
下 载 下 来 是 一 个 zip 压缩 包 ， 解 压 之 后 ， 是 一 个 exe 可 执行 文件 ， 如 图 14-2 所 示 。 


[a 


令 macb> 


人 FreeBSD 
zolt 1 4bit | 页 Ths PE » Windows (C:) > consul 1.40 windows armde4 


A Linux Name Date modifled 
2kit | dEit | A Bird 


[| consul,exe 11/15/2018 06:42 


wu SOlaris 
【可 『 号 ca bt 


面 国 Windows 
-1 


图 14-1 图 14-2 
打开 CMD 终 靖 ， 进 入 consul.exe 所 在 目录 ， 执 行 如 下 命令 局 动 Consul 服务 。 
# 进入 consul .exe 所 在 目录 


Se \consul 1 .4.0 windows amcde4 


# 启动 服务 ， -daev 表示 开发 模式 运行 ， 另 外 还 有 -server 表示 服务 模式 运行 


Consul agent 一 Ge 


局 动 过 程 信 忆 如 14-3 所 示 。 


图 14-3 


局 动 成 功 之 后 , 访问 http://localhost:8500,， 如果 可 以 看 到 如 图 14-4 所 示 的 Consul 服务 官 
理 界 面 ， 融 说 明 注 册 中 心服 务 症 可 以 正 旬 提供 服务 了 。 


Services 


consul 


monitor 改造 
改造 mango-monitor 工程 ， 作 为 服务 注册 到 注册 中 心 。 


14.3.1 沫 加 依赖 

在 pom.xml 中 添加 Spring Cloud 和 Consul 注册 中 心 依赖 。 
Spring Boot 2.1 后 的 版 本 会 出 现 Consul 服务 注册 上 的 问题 ， 可 能 是 因为 配置 变更 或 
者 支持 方式 发 生 改 变 , 由 于 版 本 太 新 , 网 上 也 没有 相关 解决 方案 , 所 以 这 里 把 Spring 
Boot 版 本 调整 为 2.04，Sprng Cloud 版 本 使 用 最 新 的 稳定 发 布 版 
Finchley. RELEASE. 


Nr 
名 
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Consul 依赖 


= 


<dependency> 


<groupId>org.springframework.cloud</grouplId> 


<artifactId>spring—cloud-starter—-consul~discovery</artifactId> 


</dependency> 
Spring Cloud 依赖 


I srnling cloni > 
<dependencyManagement> 
-ependencies> 


<dependency> 


<groupId>org.springframework.cloud</groupId> 


<artifactId>spring-cloud-dependencies</artifactId> 


<version>Finchley.RELEASE</version> 


<type>pom</type> 
<scope>import</scope> 
</dependency> 
</dependencies> 


</dependencyManagement> 


14.3.2 ”配置 文件 
修改 配置 文件 ， 添 加 服务 注册 配置 。 
application.yml 


ee 
port: 8000 
SpIring: 
application: 
name: mango—monitor 
cloud: 
CONnsul: 
host: localhost 
port: 8500 
discovery: 


ServiceName: $${spring.application.namel]} 


14.3.3 ”局 动 类 


# 注册 到 consul 的 服务 名 称 


修改 局 动 类 ， 添 加 @EnableDiscoveryClient 注解 ， 开 局 服务 友 现 支持 。 
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MangoMonitorApplication.java 


QEnableAdminSsServer 
QEnableDiscoveryClient 
QSpringBootApplication 

public class MangoMonitorApplication { 


public static void main(String[l|] args)} I 


SPIingApplicatijon.runl(MangoMonitorApplication.class, args}); 


14.3.4 测试 效果 


局 动 服 务 监 控 服 务 器 ， 访 问 http://localhost:8500， 发 现 服务 已 经 成 功 注册 到 注册 中 心 ， 如 
14-5 所 示 。 


A Warning (0) BB Critical (0) 


Sarvice Node Health 


consul 1 


mango-monitor 2 secure=false 


14.5 
访问 http://localhost:8000, 得 看 服务 监控 管理 界面 ,看 到 如 图 14-6 所 示 的 界面 束 没 问题 了 。 


Spring Boot Admin 


APPLICATIONS 


0 


INSTANCES 


0 


STATUS 


all up 


14-6 
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ES 


14.4 backup 改造 
改造 mango-backup 工程 ， 作 为 服务 注册 到 注册 中 心 。 


14.4.1  ; 东 加 依赖 
在 pom.xml 中 添加 Spring Cloud 和 Consul 注册 中 心 依赖 。 
Consul 依赖 


1 ==> 

<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring—cloud-starter—-consul—discovervy</artifactId> 


</dependency> 
Spring Cloud 依赖 


< srTBLNg Cilio di ~ 
<dependencyManagement> 
<dependenclies> 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-dependencies</artifactId> 
<version>Finchley .RELEASE</version> 
<type>pom</type> 
<scope>import</scope> 
</dependency> 
</dependencies> 


</dependencyManagement> 


14.4.2 ”配置 文件 
修改 配置 文件 ， 添 加 服务 注册 配置 。 
application.yml 


# 七 omcat 
守土] 
port: 8002 
SpIr1ing: 
application: 


name: mango-backup 
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boot: 
admin: 
client: 
url: “http://localhost:8000" 
cloud: 
CoNnsul: 
host: localhost 
port: 8500 
discovery: 
serviceName: ${spring.application.name} # 注册 到 consul 的 服务 名 称 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
二 | 辣 守 = 
DT 
endpoint: 
health: 
show—-details: ALWAYS 
# backup datasource 
mango: 
backup: 
datasource: 
host: localhost 
userName: root 
password: 1l123426 


database: mango 


14.4.3 ”局 动 类 
修改 司 动 类 ， 添 加 @EnableDiscoveryClient 注解 ， 开 局 服务 发 现 文 持 。 
MangoBackupApplication.java 


QEnableDiscoveryClient 
QSpringBootApplication(scanBasePackages={"com.louis.mango"}) 


public class MangoBackupApplication { 


public static void main(String[] args) 1{ 
SpringApplication.run(MangoBackupApplication.class, args); 
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14.4.4 测试 效果 


局 动 备份 服务 ， 访 问 http://localhost:8500， 发 现 服 务 已 经 成 功 注 册 到 注册 中 心 ， 如 图 14-7 


所 示 。 


各 Warning (0) 四 Critical (0) 


Service Node Health 
consul 1 
mange-backup 中 2 SeCUre=false 


mango-monitor secure=false 


访问 http://localhost:8000， 全 看 服务 监控 官 理 界 面 ， 友 现 服务 已 经 在 监控 列表 里 了 ， 


14-8 所 示 。 
”Spring Boot Admin 
APPLICATICNS INSTANCES STATUS 


1 1 all up 


w* mango-backup 
1m htip://GG20J1G2E.logon.ds.ge.com:8002/ 


14-8 


admin 改造 


改造 mango-admin 工程 ， 作 为 服务 注册 到 注册 中 心 。 


14.5.1 并 加 依赖 


在 pom.xml 中 添加 Spring Cloud 和 Consul 注册 中 心 依赖 。 
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Consul 依赖 


<T CoOnasul > 
<dependency> 
<groupId>org.springframework.cloud</grouplId> 


<artifactId>spring—cloud-starter-—-consul~discovery</artifactId> 


</dependency> 
Spring Cloud 依赖 
nl 


<dependencyManagement> 
<dependencies> 
<dependency> 
<grouplId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-dependencies</artifactId> 
<version>Finchley .RELEASE</version> 
<type>pom</type> 
<scope>import</scope> 
</dependency> 
</dependencies> 


</dependencyManagement> 


14.5.2 配置 文件 
修改 配置 文件 ， 添 加 服务 注册 配置 。 


application.yml 


二 会 [二 IE 
port: 8001 
SpI1nNg: 
application: 
Name: mango—~-admin 
boot: 
admin: 
rs 
url: "http://localhost:8000" 
datasource: 
name: druidDatasource 
type: com.alibaba.druid.pool .DruidDataSource 
druid: 
driver-class-—name: com.mysgl .Jdbc.Driver 
url: jdbc:mysgql://localhost:3306/mango?useUnicode=true&tzeroDateTimeBehavior= 
convertToNull&autoReconnect=truet&tcharacterEncoding=utf—8 
username: root 


password: 123456 
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filters: statywall,1log4], Coniig 
max—active: 100 
TiElial=SIesol 
max—walit: 60000 
min—idle: 1 
time—between—eviction—runs—millis: 60000 
min—evictable—idle-—time—millis: 300000 
validation—query: select xXx" 
test—-while—idle: true 
Eest—on borrow: false 
test— on—return: false 
Pool-prepared— statements: true 
max—oOpen—prepared—statements: 50 
max—pool—prepared—statement—per—connection—size: 20 
Cloud: 
CONnsul: 
host: localhost 
port: 8500 
dliscovery: 
serviceName: $5{spring.application.name} # 注册 到 consul 的 服务 名 称 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
EGS 人 Ore 
Tide 
endpoint: 
health: 
show—detalils: ALWAYS 


14.5.3 局 动 类 
修改 启动 类 ， 添 加 @EnableDiscoveryClient 注解 ， 开 启 服务 发 现 支 持 。 
MangoAdminApplication.java 


QEnableDiscoveryClient 
QSpringBootApplication(scanBasePackages={"com.louis.mango™}) 


public class MangoAdminApplication 1{ 


public static void main(string[] args) { 
SpIingApplication.run (MangoAdminApplication.class, args); 
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14.5.4 测试 效果 


启动 服务 监控 服务 器 ， 访 问 http:Wlocalhost:8$00， 发 现 服务 已 经 成 功 注 册 到 注册 中 心 ， 如 
图 14-9 所 示 。 


Node Health 


consul 加 1 
mango-admin 2 secure=false 
mango-backup Secure=ialse 


mango-monitor secure=false 


14-9 


访问 http://localhost:8000， 查 看 服务 监控 管理 界面 ， 发 现 服 务 已 经 在 监控 列表 里 了 ， 如 
图 14-10 所 示 。 


多 Spring Boot Admin 
APPLICATIONS INSTANCES STATUS 


2 2 all up 


mango-admin 
http://GG20J1G2E.logon.ds.ge.com:8001/ 


mango-backup 
http://GG20J1G2E.logon.ds.ge.com:8002/ 


图 14-10 
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服务 消费 (Ribbon、Feign) 


技术 月 景 


在 第 14 草 中 ,我 们 利用 Consul 注册 中 心 实现 了 服务 的 注册 和 有 友 现 功 有 能， 这 一 章 我 们 来 聊 
聊 服 务 的 调用 。 在 单 体 应 用 中 ,代码 可 以 且 接 依赖 ， 在 代码 中 生 接 调用 即 可 ; 但 在 做 服务 架构 
(分 布 式 架构 ) 中 ,服务 部 运行 在 各 目的 进程 之 中 ,甚至 部 普 在 不 同 的 主机 和 不 同 的 地 区 ， 束 
需要 相关 的 远程 调用 技术 了 。 

Spring Cloud 体系 里 应 用 比较 广泛 的 服务 调用 方式 有 两 种 : 


(1) 使 用 RestTemplate 进行 服务 调用 ， 可 以 通过 Ribbon 注解 RestTemplate 模板 ， 使 
其 拥有 负载 均衡 的 功能 。 

(2) 使 用 Feign 进行 声明 式 服务 调用 ， 声 明之 后 束 像 调用 本 地 方法 一 样 ，Feign 默认 使 
用 Ribbon 实现 负载 均衡 。 


两 种 方式 都 可 以 实现 服务 之 间 的 调用 , 可 根据 情况 选择 使 用 , 下面 我 们 分 别 用 实现 案例 来 
进行 讲解 。 


服务 提供 音 


15.2.1 新 建 项 目 
新 建 一 个 项 目 mango-producer， 洪 加 以 下 依赖 。 
e Swagger: API 文 档 . 
e Consul: 注册 中 心 。 
e Spring Boot Admin: 服务 监控 。 
pom.xml 


<dependency> 


<grouplId>org.springframework.boot</grouplId> 


15 章 服务 消费 (Ribbon、Feign) 


<artifactId>spring—boot-—starter—web</artifactId> 
</dependency> 
1 Swagger > 
<dependency> 
<grouplId>io.springfox</groupId> 
<artifactId>springfox-swagger2</artifactId> 
<version>$ {swagger.version}</version> 
</dependency> 
<dependency> 
<gqrouplId>io.springfox</groupId> 
<artifactId>springfox-swagger-—ui</artifactId> 
<version>$ {swagger.version}</version> 
</dependency> 
<1——spring-—boot—admin——> 
<dependency> 
<groupId>de.codecentric</grouplId> 
<artifactId>spring-—boot-admin—starter—client</artifactId> 
<version>${spring.boot.admin.version}</version> 
</dependency> 
INSul 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactIid>spring—cloud-—starter—consul—discoverv</artifactIid> 


</dependency> 


15.2.2 ”配置 文件 
在 配置 文件 添加 和 内容 如 下 ， 将 服务 注册 到 注册 中 心 并 深 加 服 务 监 控 相 关 配 置 。 
application.yml 


SE 
port: 8003 
SpIring: 
application: 
name: mango—producer 
cloud: 
CONnsul: 
host: localhost 
Port: 8200 
discovery: 
serviceName: ss{spring.application.name} # 注册 到 consul 的 服务 名 称 
boot: 


admin: 
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client: 
url: "http://localhost:8000" 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
xDOsUre- 
el 
endpoint: 
health: 
show—details: ALWAYS 


15.2.3 ”局 动 类 
修改 局 动 嚣 关 ， 添 加 @EnableDiscoveryClient 注解 ， 开 局 服务 发 现 文 持 。 


MangoProducerApplication.java 


QEnableDiscoveryClient 
QSpringBootApplication 
public class MangoProducerApplication 1 


Public static void main(Sstring[|] args) I 


SpPIljngApplicatjon.runt(MangoProducerApplication.class, args}); 


15.2.4 ” 自 定 义 Banner 
在 resources 目录 下 新 建 一 个 目 定 义 banner 文件 。 


banner .txt 


SU 
\ \ 了 YY oe WA Se 
I A 
ey | /人 \ | Ve > | 
se) Wr NA \/ 
二 二 二 二 二 = 二 二 二 Mango Application === Version: 1 .0 ========= 


15.2.5 ” 湛 加 控制 兹 
新 建 一 个 控制 器 ， 提 供 一 个 hello 接口 ， 返 回 字 符 串 信息 。 
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HelloController.java 


QRestcController 
public Class HellocController { 


QRequestMapping ("/hello") 
public String hellol() 1{ 


return "hello Mango 1™s 


为 了 模拟 均衡 负载 ， 复 制 一 份 上 面 的 项 目 ， 重 命名 为 mango-producer2， 修 改 对 应 的 端口 
为 8004， 修 改 hello 方法 的 返回 值 为 : "hello Manog 2!"。 

依 钦 局 动 注册 中 心 、 服 务 监 挖 和 两 个 服务 提供 着， 局 动 成 功 之 后 刷新 Consul 官 理 界面 ， 
发 现 我 们 注册 的 mango-producer 服务 以 及 有 2 个 节点 实例 。 

访问 http:/localhost:8500， 合 看 两 个 服务 提供 着 己 经 注册 到 注册 中 心 ， 如 图 15-1 所 示 。 


rulees lal:| KeyiValue BCL 


EAI Services 


mango-producer 


中 中 (Ay [| Passing (di 


secUure=ialse 
Healthy Nodes 
GEG20J1IG2E Le Geo20JG2E [= 


GIT1o2E, logo0n.ds.ge.comB003 G20102E,.l0gon.ds.g9e.c0m:BO04 
mango-producer-8003 mango-producer-8004 


15-1 


访问 http://localhost:8000， 僵 看 两 个 服务 提供 者 已 经 成 功 显 示 在 监控 列表 中 ， 如 图 15-2 
所 示 。 
SS Spring Boot Admin 


APPLICATIONS INSsTANCES 


1 2 


mango-producer 


hip SS20162E.logon.ds.ge.com:8003/ 


http7GGa01G2E.Iogon.ds.gecom:B004/ 


可 
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访问 http:Wlocalhost:8003mhello， 输 出 “hello Mango!”， 如 图 15-3 所 示 。 


《> © localhost:8003/hello 


hello Mango ! 


15-3 
访问 http://localhost:8004/hello， 输 出 “hello Mango2!”， 如 图 15-4 所 示 。 


和 CG © localhost8004/hello 


hello Mango2 ! 


15-4 


| ! 生 
服务 ; 


15.3.1 新 建 项 目 
新 建 一 个 项 目 mango-consumer， 添 加 以 下 依赖 。 


e Swagger: API 文档 。 
e Consul: 注册 中 心 。 
e Spring Boot Admin: 服务 监控 。 


pom.xml 


.== = = 一 


<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-web</artifactId> 


</dependency> 
1 —— Swager ——% 
<dependency> 
<gqroupId>io.springfox</grouplId> 
<artifactId>springfox—swagger2</artifactId> 


<version>$ {swagger.version}</version> 


</dependency> 

<dependency> 
<groupld>io.springfox</groupId> 
<artifactId>springfox—swagger—ui</artifactId> 


142 


第 15 章 服务 消费 (Ribbon、Feign) 


<Vversion>$ {swagger.version}</version> 
</dependency> 
<1——spring—boot—admin——> 
<dependency> 
<groupId>de.codecentric</groupld> 
<artifactId>spring-boot—admin—starter—client</artifactId> 
<version>$ {spring.boot.admin.version}</version> 
</dependency> 
I EO0nsnl = —> 
<dependency> 
<grouplId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-starter-consul-discovery</artifactId> 


</dependency> 


15.3.2 冻 加 配置 
修改 配置 文件 如 下 。 


application.yml 


Server: 
port: 8005 
SpI1ng: 
application: 


name: mango—consumer 
cloud: 
Consul: 
host: localhost 
port: 8500 


discovery: 


servyviceName: ${spring.application.namel} # 注册 到 consul 的 服务 名 称 


boot: 
admin: 
Client: 
url: "http://localhost:8000" 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
Exesnres 
Tl 
endpoint: 
health: 
show—details: ALWAYS 
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15.3.3 ”局 动 类 
修改 局 动 嚣 类， 添加 (VEnableDiscoveryClient 注 艇 ， 开 局 服务 发 现 文 持 。 
MangoConsumerApplication.java 


@EnableDiscoveryClient 
@SpringBootApplication 


public class MangoConsumerApplication 1 


PubBlic static void main(Sstringl|] args) I 


SpringApplication.run (MangoConsumerApplication.class, args); 


15.3.4 自 定 义 Banner 
在 resources 目录 下 新 建 一 个 目 定 义 banner 文件 。 


bannertxt 
本 EYE NS 大 WO TA 
We >IAEAUIODIAOEE YI AI ASV 
人 EU > | 
bs \/ VA NA WAY 
二 二 二 二 二 二 = 二 = 二 Mango Application === Version: 1] .0 ========== 


15.3.5 ”服务 消费 


添加 消费 服务 测试 类 , 添加 两 个 接口 , 一 个 僵 询 所 有 我 们 注册 的 服务 ， 男 一 个 从 我 们 注册 


的 服务 中 选取 一 个 服务 ， 采 用 轮 询 的 方式 。 
ServiceController.java 


GRestController 


Public class SErTVICeControllier 1 


QAutowired 
private LoadBalancerClient loadBRalancerClient; 
QAutowired 


private DiscoveryClient discovervyClient;s 
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二 去 
* 获取 所 有 服务 
二 
GReduestMappPing ("/serVices") 
Public Oblect servicest}) I 


return discoveryClient .getlinstances( mango—producer™ ) 


1 
* 从 所 有 服务 中 选择 一 个 服务 〈 轮 询 ) 
x 

QRequestMapping("/discover") 

Public Object discover() 1 


return loadBalancercCclient.choose("mango—-producer™") .getUri() .toSstring(); 


添加 完成 之 后 ， 启 动 项目 ， 访 问 http://localhost:8500， 服 务 消费 者 已 经 成 功 注册 到 注册 中 
心 ， 如 图 15-5 所 示 。 


(Ge [本 于 TWIE 喇 所 odes Keyi Value ABEL Intentreons Documaentation 


Services 


All [FN 哪 Pass ng 全 ) 和 Warn ng to 国 Critical (ol Bearch by narme 


Service Node Health 

comsul 喇 1 

mango-consumer 和 : seECLIFE=Talse 
mango-monitor 本 2 secUre=false 


mango-producer [| secure=false 


15-5 
访问 http://localhost:8000, 服务 消费 者 已 经 成 功 显示 在 监控 列表 中 ， 如 图 15-6 所 示 。 
Spring Boot Admin 


2 加 


manNngo-coNsSUmer 
httpwAGGa0J1TGaE.Iogon.ds.ge.com:8005/ 


mango-producer 


15-6 
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访问 http://localhost:8005/services， 返 回 两 个 服务 ， 分 别 古 我 们 注册 的 8003 和 8004， 如 
图 15-7 所 示 。 


C (3 Iocalhost8005/services 


[{ serviceld’ :mango- 
producer host : Wee et Log ds. ge. COm , 和 -B003, secure :alse, ,etadate 
一 局 | I | hy 二 机- 11 


全 serviceTd” ED 0 
producer” ,” host ”: 0 logon. ds. ge. com’, port” :8004d, "secure” :false, metadata’| 
{"secure”: false’}, "uri”: "http: //GG20J152E. logom ds. ge. com: 8004”, "scheme” :rl 1}] 


15-7 


反复 访问 http://localhost:8005/discover, 结果 区 伙 返 回 服 务 8003 和 8004,， 因 为 默认 的 负载 
均衡 器 采用 的 是 轮 询 方式 ， 如 图 15-8 所 示 。8003 和 8004 两 个 服务 交 蔡 出 现 ， 从 而 实现 了 获 


一 GG © localhost:8005/discover ce CG © localhost:8005/discover 


http://GG20J1G2E.logon.ds.ge.com:8003 http://GG20J1G2E.logon.ds.ge.com:8004 


15-8 


大 多 数 情 况 下 我 们 希望 使 用 均衡 锅 载 的 形式 去 获取 服务 端 提供 的 服务 ,因此 使 用 第 二 种 方 
法 来 模拟 调用 服务 端 提 供 的 hello 方法。 创建 一 个 控制 器 CallHelloController。 


CallHelloController.java 


QRestController 
public class CallHelloController 1 


QAuUutowired 


private LoadBalancerClient loadBalancer; 


QRequestMapping("/call™") 

Public String call() 1 
ServiceInstance servicelnstance = loadBalancer.choose( "mango—producer” ); 
System.out.printlin ("服务 地 址 ; "+ serviceInstance.getUri()); 
System.out .printiln ("服务 名 称 : ”二 servicelnstance.getServicelIld()); 


String callServiceResult = new 
RestTemplate () .getForObject (serviceInstance.getUri(}) .tostring() + "/hello™, 
String.class}); 

Svstem.out .printintcallServiceResult};s 


return callServiceResult:; 


使 用 RestTemplate 进行 远程 调用 。 添 加 完 之 后 重 局 kitty-consumer 项 目 。 在 浏 贤 器 中 访问 
http://localhost:8005/call， 依 这 往 复 返 回 的 结果 如 图 15-9 所 示 。 
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< CG © localhost:8005/call ec C QD localhost:8005/call 


hello Mango ! hello Mango2 ! 


图 15-9 


15.3.6 ”负载 均衡 颖 (Ribbon) 

在 上 面 的 教程 中 ， 我 们 是 这 样 调用 服务 的 ， 移 通过 LoadBalancerClient 选取 出 对 应 的 服 
务 ， 然 后 使 用 RestTemplate 进行 远程 调用 。 

LoadBalancerClient 束 是 负载 均衡 器 ，RibbonLoadBalancerClient 是 Ribbon 默认 使 用 的 负 


(1) 答 找 服务 ， 通 过 LoadBalancer 合 询 服务 。 
Servicelnstance servicelnstance = LoaaBalance -Choose ( mango—producer ) 
(2) 调用 服务 ， 通 过 RestTemplate 远程 调用 服务 。 


String callServiceResult = new 
RestTemplate () .getForObject (serviceInstance.getUri() .tostring{() + "/hello™, 


String.class); 


这 样 就 完成 了 一 个 简单 的 服务 调用 和 负载 均衡 。 接 下 来 我 们 说 膏 Ribbon。 

Ribbon 是 Netflix 发 布 的 负载 均衡 器 ， 它 有 助 于 控制 HTTP 和 TCP 的 客 忆 站 的 行为 。 为 
Ribbon 配置 服务 提供 者 地 址 后 ，Ribbon 就 可 基于 某 种 负载 均衡 算法 自动 地 帮助 服务 消费 者 去 
请 求 。Ribbon 默认 为 我 们 提供 了 很 多 负载 均衡 算法 ， 例 如 轮 询 、 随 机 等 。 当 然 ， 我 们 也 可 为 
Ribbon 实现 目 定 义 的 负载 均 衔 算法 。 

Ribbon 内 前 负载 均衡 案 略 如 表 15-1 所 示 。 


表 15-1 ribbon 内 置 负载 均衡 策略 


逐个 考察 Server， 如 果 Server 被 
public class BestAvaillableRule | | 
选择 一 个 最 小 的 并 发 请 求 的 | tripped 了 就 忽略 ， 再 选择 其 中 


BestAvailableRule extends ClientConfigEnabled 
server ActiveRequestsCount 最 小 的 
RoundRobinRule 


SETIWVEer 
过 滤 掉 那些 因为 一 直 连 接 失 败 


public 的 被 标记 为 circuit tripped 的 后 z 
了 了 a | 包含 过 滤 server 的 逻辑 ,其实 就 
AvaillabilityFilterineRule | AvailabilityFiltermeRule 端 server， 并 过 滤 掉 那些 高 并 发 | 四 
是 检查 status 里 记录 的 各 server 
extends PredicateBasedRule 的 的 后 端 server ( active 


connections 超过 配置 的 阅 值 ) 的 运行 状态 


使 用 一 个 AvailabilityPredicate 来 
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策略 名 


WeightedResponseTime 
Rule 


RoundRobinRule 


RandomRule 


zoneAvoldanceRule 


public class 
WeightedResponseTimeRule 


extends RoundRobinRule 


public class RetryRule extends 
AbstractLoadBalancerRule 


public class RoundRobinRule 
extends 
AbstractLoadBalancerRule 
public class RandomRule 
extends 


AbstractLoadBalancerRule 


public class ZoneAvolidanceRule 
extends PredicateBasedRule 


15.3.7 ”修改 启动 类 


我 们 修改 一 下 局 动 妖 类 , 注入 RestTemplate, 并 讨 加 @LoadBalanced 注解 (用 于 拦截 请 求 )， 
以 使 用 mbbon 来 进行 负载 均衡 。 


MangoConsumerApplication.java 


QEnableDiscoveryClient 


QSpringBootApplication 


根据 啊 应 时 间 分 配 一 个 weight， 
啊 应 时 间 越 长 ，weight 越 小 ,被 
选中 的 可 能 性 越 低 


对 选 定 的 负载 均衡 策略 机 采取 
重 试 机 制 


使 用 roundRobin 方式 轮 询 选 择 


SEIrVer 


随机 选择 一 个 server 


复合 判断 server 所 在 区 域 的 性 
能 和 server 的 可 用 性 , 根据 结果 
来 选择 server 


public class MangoConsumerApplication | 


public static void mainl(stringl|] args) 1{ 


( 续 表 ) 


第 由 声明 第 中 撒 达 


一 个 后 台 线 程 定期 地 从 status 里 
面 读 取 评 价 啊 应 时 间 ， 为 每 个 
server 计算 一 个 weight。wWeisght 
的 计算 比较 简单 ，responsetime 
减 去 每 个 server 目 己 平均 的 
responsetime 是 server 的 权重 。 

当 刚 开始 运行 还 没有 形成 status 
时 ,使 用 roubine 策略 选择 server 
在 一 个 配置 时 间 段 内 当选 择 
server 不 成 功 时 ， 就 一 直 等 试 使 
用 subRule 的 方式 选择 一 个 可 用 


的 server 
轮 询 index, 选择 index 对 应 位 置 


的 server 


随机 选择 index， 再 选择 对 应 位 
置 的 server 


使 用 ZoneAvoidancePredicate 和 
AvailabilityPredicate 来 判断 是 否 
选择 某 个 server， 前 一 个 判断 判 
定 一 个 zone 的 运行 性 能 是 否 可 
用 ， 剔 除 不 可 用 的 zone 的 所 有 
server, AvailabilityPredicate 用 于 
过 滤 掉 连接 数 过 多 的 server 


SpringApplication.run(MangoConsumerApplication.class, args); 
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QLoadBalanced 
PubBIic RestTemplate restTemplate() 1 


return new RestTemplate(}); 


15.3.8 添加 服务 
新 建 一 个 控制 器 类， 注入 RestTemplate, 并 调用 服务 提供 者 的 hello 服务 
RibbonHelloController.java 


QRestcController 
public class RibbonHellocCcontroller | 


QAuUutowired 


private RestTemplate restTemplate; 


QRequestMapping("/ribbon/call™") 
Public String call()} I 
// 调用 服务 ， service-producer 为 注册 的 服务 名 称 
// LoadBalancerInterceptor 会 拦截 调用 并 根据 服务 名 找到 对 应 的 服务 
StrIiNngd CallServiceResultl = 
restTemplate.getForoObject ("http://mango—producer/hello", String.class}); 


return callServiceResult:; 


15.3.9 页 面 测试 
启动 消费 者 服务 ， 访 问 http://localhost:8005/ribbon/call， 依 次 返回 的 结果 如 图 15-10 所 示 。 


< GG © localhost:8005/ribbon/call < CG © localhost:8005/ribbon/call 


hello Mango ! hello Mango2 ! 


15-10 
说 明 ribbon 的 负载 均衡 已 经 成 功 局 动 了 。 
15.3.10 ”负载 策略 


修改 员 载 均衡 梨 略 很 简单 , 只 需要 在 配置 文件 指定 对 应 的 负载 均衡 硕 即 可 。 如 这 里 把 宁 略 
修改 为 随机 策略 ， 之 后 负载 均衡 如 会 随机 选取 注册 的 服务 。 


application.yml 
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#ribbon 负载 均衡 策略 配置 ， service-producet 为 注册 的 服务 名 
SETVIRe DrONcCer: 
ribbon: 


NFLOadBalancerRuleClassName: com.netflix.loadbalancer.RandomRule 


服务 消费 ( Feign ) 

Spring Cloud Feign 是 一 套 基 于 Netflix Feign 实现 的 声明 式 服 务 调用 客户 问 ， 使 编写 Web 
服务 客户 端 变 得 更 加 何 单 。 我 们 只 圾 要 通过 创建 接口 并 用 注解 来 配置 它 即 可 完成 对 Web 服务 
接口 的 绑 定 。 它 具备 可 插 拔 的 注解 支持 ， 包 括 Feign 注解 、JAX-RS 注解 。 它 也 支持 可 插 拔 的 
编码 器 和 解码 左 。Spring Cloud Feign 还 扩展 了 对 Spring MVC 注解 的 文 持 ， 同 时 还 整合 了 
Ribbon 来 提供 均衡 负载 的 HITP 客户 奖 实 现 。 


15.4.1 状 加 依赖 


修改 mango-consumer 的 pom 文件 ， 添 加 feign 依赖 。 


pom.xml 
-elgg > 
<dependency> 


<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-starter-openfeiqgn</artifactId> 


</dependency> 


15.4.2 启动 类 

修改 局 动 右 类 ， 汶 加 @EnableFeignClients 注解 ， 开局 扫 摘 Spring Cloud Feign 客户 疹 的 
功能 。 修 改 完 成 之 后 的 局 动 类 如 下 。 

MangoConsumerApplication.java 


QEnableFeignClients 
QEnableDiscoveryClient 
@SpringBootApplication 


public class MangoConsumerApplication 1 
PubBlic static void main(Sstringl|] args) | 


SpringApplication.run(MangoConsumerApplication.class, args); 


aBean 


QLoadBalanced 
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Public RestTemplate restTemplate(} I 


return new RestTemplate (}); 


15.4.3 ”添加 Feign 接口 

添加 MangoProducerService 接口 ， 在 关头 添加 注解 @FeignClient("mango-producer") ， 
mango-producer 是 要 调用 的 服务 名 。 

浴 加 跟 调 用 目标 方法 一 样 的 方法 声明 ， 只 再 要 方法 声明 ,不 青 要 具体 实现 ,注意 跟 目标 方 
法 定义 保持 一 致 。 

MangoProducerService.java 


QFeignClient (name = "mango~producer™") 


public interface MangoProducerService | 


QRequestMapping ("/hello") 
Public String hellol})s 


15.4.4” 湛 加 控制 痢 

添加 FeignHelloController 控制 占 ， 注 入 MangoProducerService， 束 可 以 像 使 用 本 地 方法 
一 样 进行 调用 了 。 

FeignHelloController.java 


QRestController 
public class FeignHelloController | 


QAuUutowired 


private MangoProducerService mangoProducerServices? 


QRequestMapping("/feign/call™") 
Public String calll(} I 


// 像 调用 本 地 服务 一 样 


return mangoProducerService.hello()}); 
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15.4.5 页面 测试 


启动 成 功 之 后 ,访问 http://localhost:8005/feign/call， 发 现 调用 成 功 ， 且 依次 往复 返回 如 图 
15-11 所 示 的 结果 。 


eC © localhost:8005/feign/call 


hello Mango ! 


和 一 已 加 localhost8005/feign/call 


hello Mango2 ! 


15-11 


Feign 是 声明 式 调用 ， 会 产生 一 些 相关 的 Feign 定义 接口 ， 所 以 建议 将 Feign 定义 的 接口 
者 统一 放置 官 理 ， 以 区 别 内 部 服务 。 
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雪崩 效应 


在 微服 务 架 构 中 ， 服 务 众 多 ， 通 常会 涉及 多 个 服务 层级 的 调用 ， 一旦 基础 服务 发 生 故 障 ， 
很 可 能 会 导致 级 联 故 障 ， 进而 造成 整个 系统 不 可 用 ,这 种 现象 被 称 为 服务 雪崩 效应 。 服务 雪崩 
效应 是 一 种 因 “ 服 务 提供 者 ”的 不 可 用 导致 “服务 消费 者 ”的 不 可 用 并 将 这 种 不 可 用 逐渐 放大 
的 过 程 。 

比如 在 一 个 系统 中 ，A 是 服务 提供 者 ，B 是 A 的 服务 消费 者 ，C 和 D 又 是 B 的 服务 消费 
者 。 如 果 此 时 A 发 生 故 障 ， 则 会 引起 B 的 不 可 用 ， 而 B 的 不 可 用 又 将 导致 C 和 D 的 不 可 用 ， 
当 这 种 不 可 用 像 滚 雪 球 一 样 逐 渐 放 大 的 时 候 ， 雪 骨 效 应 就 形成 了 。 


熔断 器 ( CircuitBreaker ) 


熔断 医 的 原理 很 简单 ， 如 同 电 力 过 载 保 护 器 。 它 可 以 实现 快速 失败 ， 如 果 它 在 一 段 时 间 内 
侦 测 到 许多 闫 似 的 钳 误 ， 吏 会 吕 迫 其 以 后 的 多 个 调用 快速 失败 ， 不 再 访问 远程 服务 闫 ， 从 而 防 
止 应 用 程序 不 断 地 和 试 执行 可 能 会 失败 的 操作 ， 使 得 应 用 程序 继续 执行 而 不 用 等 竺 修正 错误 ， 
或 者 浪费 CPU 时 间 去 等 到 长 时 间 的 超时 产生 。 熔 断 器 也 可 以 使 应 用 程序 能 够 诊断 错误 是 否 已 
经 修正 ， 如 条 已 经 修正 ， 应 用 程序 会 再 次 符 试 调用 操作 。 和 熔断 亏 模 式 驶 像 是 那些 容易 寻 致 错误 
操作 的 一 种 代理 。 这 种 代理 能 够 记录 最 近 调 用 友 生 错误 的 识 数 ， 然 后 决定 使 用 允许 操作 继续 ， 
或 者 立即 返回 错误 。 炊 断 需 是 你 护 服务 局 可 用 的 最 后 一 道 防 线 。 


Hystrix 特性 


16.3.1 上 断路 希 机 制 
断路 亏 很 好 理 解 ， 当 Hystrix Command 请 求 后 疹 服 务 失 败 数 量 超过 一 定 比 例 〈 默 认为 
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50%) ， 疡 路 喜 会 切换 到 开路 状态 (Open ) 。 这 时 所 有 请 求 会 百 接 失败 而 不 会 及 送 到 后 病 服 务 。 
断路 颖 保持 在 开路 状态 一 段 时 间 后 (上 默认 为 5 秒 ) ， 目 动 切换 到 半 开 路 状态 CHALF-OPEN ) 。 
这 时 会 判断 下 一 次 请 求 的 返回 情况 ， 如 末 请 求 成 功 ， 断 路 齿 切 回 财 路 状态 (CLOSED) ， 人 否则 
重新 切换 到 开路 状态 OPEN ) 。Hystrix 的 断路 右 吏 像 我 们 家 寿 电 路 中 的 保险 丝 ， 一 旦 后 痕 服 
务 不 可 用 ， 断 路 副 束 会 且 接 切断 请 求 链 ， 避免 太太 大 量 无 效 请 求 ， 从 而 影响 系统 大 吐 量 ， 并 且 
靳 路 顷 有 目 我 检测 开 恢复 的 能 力 。 


16.3.2 fallback 


fallback 相当 于 降级 操作 。 对 于 俘 询 操作 ， 我 们 可 以 实现 一 个 fallback 方法 ， 当 请 求 后 站 
服务 出 现 异 稍 的 时 候 ， 可 以 使 用 fallback 方法 返回 的 值 。fallback 方法 的 返回 值 一 般 是 设置 的 
默认 值 或 者 来 目 绥 存 。 


16.3.3 ”资源 隔离 

在 Hystrix 中 ， 主 要 通过 线程 池 来 实现 资源 隔离 。 通 种 在 使 用 的 时 候 我 们 会 根据 调用 的 远 
程 服务 划分 出 多 个 线程 池 。 例如 ,调用 产品 服务 的 Command 放 入 A 线程 地 ， 调 用 账户 服务 的 
Command 放 入 B 线程 池 。 这 样 做 的 主要 优点 是 运行 环境 被 阳 离 开 了 了。 这样 束 算 调 用 服务 的 代 
码 存 在 bug 或 者 由 于 其 他 原因 导致 目 己 所 在 线程 池 被 耗 尽 ， 也 不 会 对 系统 的 其 他 服务 造成 影 
呵 , 但 是 市 来 的 代价 就 古 维 护 多 个 线程 池 会 对 系统 市 来 颌 外 的 性 能 开销 。 如果 是 对 性 能 有 严格 
要 求 而 且 确 信 目 己 调 用 服务 的 客户 并 代 人 码 不 会 出 问题 ， 束 可 以 使 用 Hystrix 的 信号 模式 

(Semaphores) 来 隔离 资源 。 


Go Feign Hystrix 


因为 Feign 中 已 经 依赖 了 了 Hystrix， 所 以 在 Maven 配置 上 不 用 做 任何 改动 束 可 以 使 用 
了 ， 我 们 可 以 在 mango-consumer 项 目 中 直接 改造 。 


16.4.1 修改 配置 
在 配置 文件 中 添加 配置 ， 开 局 Hystrix 炊 断 厂 。 
application.yml 


# 开 局 熔断 器 
下 人 On : 
hystrix: 


enabled: true 
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16.4.2 ”创建 回调 类 


创建 一 个 回调 类 MangoProducerHvystrix， 实 现 MangoProducerService 接口 ， 并 3 
的 方法 ， 返 回调 用 失败 后 的 信息 。 


MangoProducerHystrix.java 


QComponent 


public class MangoProducerHystrix implements MangoProducerService { 


QRequestMapping("/hello") 
Public String hellol(})} 1{ 


elurn YY sorrvyr hello service call falleds Ss 


添加 fallback 属性 。 修 改 MangoProducerService, 在 (@FeignClient 注解 中 加 入 fallback 属 
性 ， 绑 定 我 们 创建 的 失败 回调 处 理 类 。 
MangoProducerService.java 


QFeignClient (name = "mango~-producer", fallback = MangoProducerHystrix.class) 


public jnterface MangoProducerService 1 


@RequestMapping("/hello") 
Public String hellol()})s 


到 此 ， 所 有 改动 代码 束 完 成 了 了， 吏 定 这 么 简单 。 


16.4.3 页面 测 试 


启动 成 功 之 后 ， 多 次 访问 http://localhost:8005/feign/call， 结 果 如 同 之 前 一 样 交 蔡 返 回 “hello 
Mango! ”和 “hello Mango2! ”, 说 明 熔 断 器 的 启动 不 会 影响 正常 服务 的 访问 ， 如 图 16-1 所 示 。 


< GG © localhost8005/feign/call 和 GC © localhost8005/feign/call 


hello Mango ! hello Mango2 ! 


16-1 
把 mango-producer 服务 停 反 ， 再 次 访问 ， 返 回 我 们 提供 的 燃 断 回调 信息 ， 熔 上 断 成 功 ， 
mango-producer2 服务 正常 ， 如 图 16-2 所 示 。 
重 局 mango-producer 服务 ， 再 座 访 问 ， 发 现 服 务 久 可 以 访问 了 ， 说 明 炊 断 占 有 具有 目 我 诊 
断 修复 的 功能 ， 如 图 16-3 所 示 。 
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二 © © localhost:8005/feign/call CG © localhost:8005/feign/call 


sorry, hello service call failed. hello Mango2 ! 


16-2 


二 GG @ localhost:8005/feign/call 所 CGC © localhost:8005/feign/call 


hello Mango ! hello Mango2 ! 


图 16-3 


在 重启 成 功 之 后 ， 可 能 需要 一 些 时 间 ， 等 待 熔断 器 进行 自我 诊断 和 修复 完成 之 后 ， 
注 总 方 可 正常 提供 服务 。 


局 


.D9 H ystrix Dashboard 


Hystrix-dashboard 是 一 于 针对 Hystrix 进行 实时 监控 的 工具 ， 通 过 Hystrix Dashboard 我 们 
可 以 直观 地 看 到 各 Hystrix Command 的 请 求 响应 时 间 、 请 求 成 功率 等 数据 。 


16.5.1 ); 湛 加 依赖 
新 建 一 个 mango-hystrix 工程 ， 修 改 pom 文件 ， 添 加 相 天 依赖 。 


pom.xml 
过 1 一 = 一 spring boot =——»> 
<dependency> 


<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot—starter</artifactId> 
</dependency> 
站 一 二 二 一 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-starter-consul-discovery</artifactId> 
</dependency> 
1 aeltnalor > 
<dependency> 
<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-actuator</artifactId> 
</dependency> 
<1——spring-boot—admin——> 


<dependency> 
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<groupId>de.codecentric</groupId> 
<artifactId>spring—boot-admin-—starter—client</artifactId> 
<Vversion>${spring.boot.admin.version}</version> 

</dependency> 

<1——hystrix—dashboard——> 

<dependencvy> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-—cloud-starter-netflix-hystrix-dashboard</artifactId> 


</dependency> 


Spring Cloud 依赖 


<dependencyManagement> 
<dependencies> 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-dependencies</artifactId> 
<version>${spring-cloud.version}</version> 
<type>pom</type> 
<scope>import</scope> 
</dependency> 
</dependencies> 


</dependencyManagement> 


16.5.2 启动 类 
在 局 动 类 中 添加 注解 @EnableHystrixDashboard， 开 司 熔 上 断 监 控 文 持 。 
MangoHystrixApplication.java 


QEnableHystrixDashboard 
QEnableDiscoveryClient 
QSpringBootApplication 

public class MangoHystrixApplication { 


public static void main(string[l] args) { 
SpPIingApplication.runl(MangoHystrixApplication.class, args}); 


16.5.3 ” 自 定 义 Banner 
在 resources 目录 下 新 建 一 个 目 定 义 banner 文件 。 
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banner.txt 
ee /| Wl 
BE /人 二 A 
1 RNI = 
Ee 让 TAR SC 
AN bs WA 
==== 二 Mango Application == Version: 1.0 ===== 


16.5.4 配置 文件 
修改 配置 文件 ， 把 服务 注册 到 注册 中 心 。 
application.yml 


eno 
port: 8o201 
SpI1ng: 
applicatjon: 
name: mango—hystrix 
cloud: 
CoNnsul: 
host: localhost 
port: 8500 
dliscovery: 


servyviceName: ${spring.application.name} # 注册 到 consul 的 服务 名 称 


16.5.5 配置 监控 路 径 


注意 ， 如 果 使 用 的 是 2x 等 比较 新 的 版 本 ， 就 需要 在 Hystrix 的 消费 端 配置 监控 路 径 。 
打开 消费 端 mango-consumer 工程 ， 添 加 依赖 。 


pom.xml 
<1——actuatorom—> 
<dependency> 


<groupId>org.springframework.boot</groupId> 
<artifactId>spring—boot—starter—-actuator</artifactId> 

</dependency> 

<1I——hystrix-dashboard——> 

<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring-cloud-starter-netflix-hystrix-dashboard</artifactId> 


</dependency> 
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修改 司 动 类 ， 添 加 服务 监控 路 径 配 置 。 
MangoConsumerApplication.java 


// 此 配置 是 为 了 服务 监控 而 配置 ， 与 服务 容错 本 里 无 关 ， 


// ServletRegistrationBean 因为 springboot 的 默认 路 径 不 是 " /hystrix-stream"， 
// 只 要 在 自己 的 项 目 里 配置 上 下 面 的 servlet 束 可 以 了 

QBean 

Puplc ServietRegistrationBean oetSserviet(}) 1{ 


HystrixMetricsSstreamServiet streamServiet 


= New 
HystrixMetricsstreamServilet(}; 


ServiletRegistrationBean registrationBean = new 
ServietRegistrationBean(streamServiet}):; 
registrationBean.setLoadonstartup (1}); 


registrationBean.addUrlMappings ("/hystrix.stream"™");} 


reglistrationBean.setName ("HystrixMetricsStreamServilet™); 


return registrationBean; 


16.5.6 ”页 面 测 试 


先后 司 动 monitor、producer、consumer、hystrix 服务 ， 访 问 http://localhost:8501/hystrix,， 
会 看 到 如 图 16-4 所 示 的 界面 。 
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Hystrix Dashboard 


[http: vhostiname:portiturbinelturbine. stream 


Custer Wa Tourpine TEST http:/ turbine-hostname:port/tyurbine.stream 
SEE via Torpine rcustom ciwstery httpi/turbine-hostname:port/turbine.stream?cluster=[clusterNamel] 
SB Hysiriy Ape httpyiihystrix-app:portihystrix.stream 


ms Title: IlExample Hystrix App 


| Monitor Sireanm 
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此 时 没有 任何 具体 的 监控 信息 ， 需 要 输入 要 监控 的 消费 者 地 址 及 监控 信息 的 轮 记 时间 和 
标题 。 


Hystrix Dashboard 共 文 持 以 下 3 种 不 同 的 监控 方式 : 
(1) 单 体 Hystrix 消费 者 : 通过 URL http://hystrix-app:port/hystrix.stream 开局 ， 实 现 对 有 具 
体 东 个 服务 实例 的 监控 。 


(2) 默认 集群 监控 : 通过 URL http:wturbine-hostname:port/turbine.stream 开启， 实现 对 默 
认 集 和 群 的 监控 。 
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(3) 目 定 集群 监控 :通过 URL http://turbine-hostname:port/turbine.stream?cluster=[clusterNamel] 
开启， 实现 对 clusterName 集群 的 监控 。 


这 里 先 介绍 对 单 体 Hystrix 消费 者 的 监控 ， 后 面 整合 Turbine 集群 的 时 候 再 说 明 后 两 种 
首先 ， 访 问 http://localhost:8005/feign/call， 查 看 要 监控 的 服务 是 否 可 以 正常 访问 ， 如 图 
16-5 所 示 。 


二 (加 localhost:8005/feign/call 


hello Mango ! 


图 16-5 


确认 服务 可 以 正 第 访问 之 后 ， 在 监控 地 址 内 输入 http://localhost:8005/hystrix.stream， 人 然后 


Hystrix Dashboard 
http:iMocalhost:8005mystri stream 
Clrster via Furbine rderavtt custery http: turbine-hostname:port/turbine.stream 
Custer va Turtine rcustom clusterk http:/ turbine-hostname:port/turbine.stream?cluster= [clusterName] 


SB RE AD http: /ihystnix-app:port/hystrix.stream 


Delay: |2000 Ims Title: Example Hystrix App | 


| Monltor Straam | 
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刚 进 去 , 页 面 先 显示 loading... 信息 , 在 多 次 间断 访问 http://localhost:8005/feiegn/call 之 后 ， 
统计 图 表 信息 如 图 16-7 所 示 。 


Success | Short-Circuited | Bad Request | Timeout | Rejected | Failure | Error® 


MangoProducerService#hellol) 
0 | 0.0 为 


0 
0 | 0 
Host: 0.0/s 


Cluster: 0.0s 
Circuit Glosed 


| ao0th 26ms 
20ms oath 26ms 
19ms 995th 26nms 


Sort: Mphabetical | Yolume | 


mandgo-producer 


Host: O.0/s 
Cluster: 0.0s 


Active 0 Max Active 
Queued 0 Executions 
Pool Size 10 Queue Size 
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各 项 指标 的 含义 如 图 16-8 所 示 。 


成 功 噩 ”2 | 4 超时 数 
短路 / 迷 断 效 0 | 0 上 比 香 也 拒绝 教 
0 失败 /局 常 ， 


| helloKey a 
县 这 10 种 的 
2 80.0 % 一 ” 错 吃 比例 


"| 中 1 


Host: 0.4/s 一 > 请 求 频率 
uster: 0.9/s 
Circuit Closed 一 > 师 中 器 状态 


集群 下 的 Hosts 1 90th 2002ms hi 
主机 报告 < 一 Median 1217ms “99th 2003ms 一 一 > 百 分 位 延迟 统计 
Mean 1262ms 99 5th 2003ms 


nd i 
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Spring Cloud Turbine 


上 面 我 们 集成 了 Hystrix Dashboard, 使 用 Hystrix Dashboard 可 以 看 到 单个 应 用 内 的 服务 信 
恩 。 显 然 这 是 不 够 的 ， 我 们 还 需要 一 个 工具 能 让 我 们 汇总 系统 内 多 个 服务 的 数据 并 显示 到 
Hystrix Dashboard 上 ， 这 个 工具 束 是 Turbine。 


16.6.1 洒 加 依赖 
修改 mango-hystrix 的 pom 文件 ， 添 加 turbine 依赖 包 。 


?7 因为 我 们 使 用 的 注册 中 心 是 Consul， 所 以 需要 排除 默认 的 euraka 包 ， 不 然 会 出 现 ; 
注 意 突 ， 了 叶 致 — 尼 动 过 程 出 错 。 


pom.xml 


-1 — ENTDINE > 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring—-cloud-starter-—-netflix-turbine</artifactId> 
<exCluSsS1ons>» 
<eEXCl1US1ON> 
<grouplId>org.springframework.cloud</groupId> 
<artifactId>spring—cloud-starter—netflix-—-eureka—client</artifactId> 
</exclusion> 
</exclusions> 


</dependency> 
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16.6.2 ”启动 类 
为 司 动 类 谎 加 @EnableTurbine 注解 ， 开 司 Turbine 文 持 。 
MangoHystrixApplication.java 


QEnableTurpine 
@EnableHystrixDashboard 
QEnableDiscoveryClient 
QSpringBootApplication 

public class MangoHystrixApplication 1 


Public static void main(String[l] args)} I 
SpIingApplicatijion.run (MangoHystrixApplication.class, args); 


16.6.3 配置 文件 
修改 配置 文件 ， 添 加 Turbine 的 配置 信息 。 
application.yml 


eno 
port: 3838201 
SpI1nNg: 
application: 
name: mango—hystrix 
cloud: 
consul: 


host: localhost 


port: 8200 
discovery: 
servyviceName: ${spring.application.namel} # 注册 到 consul 的 服务 名 称 
turbine: 
instanceUrlSuffix: hystrix.stream # 指定 收集 路 径 


appConfig: kitty-consumer # 指定 了 需要 收集 监控 信息 的 服务 名 ， 多 个 以 ", "进行 区 分 
clusterNameExpression: "'default”"”" 

# 指定 集群 名 称 ,者 为 aefault 则 为 默认 集群 ， 多 个 集群 则 通过 此 配置 区 分 
combine—host-—port: true 


并 默认 为 false, 服务 以 host 进行 区 分 ， 天 设置 为 true 则 以 host+port 进行 区 分 
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16.6.4 测试 效果 

依次 司 动 monitor、Pproducer 、consumer 、hystrix 服务 ， 硝 认 服 务 局 动 无 误 之 后 访问 
http://localhost:8501/hystrix， 输 入 http:Wlocalhost:8$01/turbine.stream， 碍 看 炊 断 监控 图 表 信 息 ， 
如 图 16-9 所 示 。 


i 


AA 


Hystrix Dashboard 


Custer via Turpbine (oeravutt ciustery http://turbine-hostname:port/turbine.stream 
Cusier via Turpine (custorm Cluster http:/ /turbine-hostname:port/turbine.streaam?cluster=[clusterNamel] 
Singre Hystrix App: http://hystrix-app:port/hystrix.stream 


Delay: 2000 ms Title: Example Hystrix App | 
| Monitor Stream | 
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图 16-10 所 示 就 是 利用 Turbine 聚合 多 个 Hytrix 消费 者 的 熔断 监控 信息 结果 。 内 存 允 许 
的 话 ， 可 以 多 局 动 几 个 消费 痢 合 看。 


Hystrix Stream: http://localhost:8501/turbine.stream SN HYSTRIX 


(3 DEFEND YOUR APP 


KittyProducerService#hellol) 
O00.0% 


Circuit Closed 

Hasts 1 90h 29ms 
Median 115ms Seth oms 
Mean 1Sms 9 Sh ZOms 


Thread Pools Sort: Alphabetical | Violume | 


kitty-producer 


Host: 0,0/s 

uster: 0,0/s 
Actve 0 Max Active 
Queued 0 Executions 
Pool SeEe 10 Quevue See 
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扩 林 月 景 


前 面 我 们 通过 Ribbon 或 Feign 实现 了 微服 务 之 间 的 调用 和 负载 均 街 ， 那 我 们 的 各 种 微服 
务 又 要 如 何 提供 给 外 部 应 用 调用 呢 ? 
因为 是 REST API 接口 ， 所 以 外 部 客户 端 直 接 调 用 各 个 微服 务 是 没有 问题 的 , 但 是 出 于 种 
种 原因 ， 这 并 不 是 一 个 好 的 选择 。 
让 客户 端 直接 与 各 个 微服 务 通信 ， 会 有 以 下 几 个 问题 : 
e 客户 端 会 多 次 请 求 不 同 的 微服 务 ， 增 加 客户 端的 复杂 性 。 
e 存在 跨 域 请 求 ， 在 一 定 场景 下 处 理会 变 得 相对 比较 复杂 。 
e 实现 认证 复杂 ， 每 个 微服 务 都 需要 独立 认证 .。 
e 难以 重 构 ， 项 目 迭 代 可 能 导致 微服 务 重新 划分 。 如 果 客 户 端 直接 与 微服 务 通信 ， 那 么 
重 构 将 会 很 难 实 施 。 
e@ 如 果 某 些微 服务 使 用 了 防火 墙 /浏览 器 不 友好 的 协议 ， 直 接 访问 会 有 一 定 困 难 ， 
@ 面 对 类 似 上 面 的 问题 ， 我 们 要 如 何 解决 呢 ? 答 案 就 是 : 服务 网 关 ! 
使 用 服务 网 关 具 有 以 下 几 个 优点 : 
@ 易于 监控 。 可 在 微服 务 网 关 收 集 监 控 数 据 并 将 其 推送 到 外 部 系统 进行 分 析 。 
@ 易于 认证 。 可 在 服务 网 关上 进行 认证 ， 然 后 转发 请 求 到 徽 服务， 无 须 在 每 个 微服 务 中 
进行 认证 。 
e 客户 端 只 跟 服 务 网 关 打 交道 ， 减 少 了 客户 端 与 各 个 微服 务 之 间 的 交互 次 数 。 
@ 多 渠道 支持 ， 可 以 根据 不 同 客户 端 (Web 端 、 移 动 端 、 桌 面 端 等 ) 提供 不 同 的 API 服 
务 网 关 。 


Spring Cloud Zuul 


服务 网 关 是 微服 务 架 构 中 一 个 不 可 或 忠 的 部 分 。 在 退 过 服务 网 关 统 一 问 外 系统 提供 REST 
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API 的 过 程 中 ， 际 了 具备 服务 路 由 、 均 衡 负 载 功能 之 外 ， 它 还 具备 了 权限 控制 等 功能 。 

Spring Cloud Netflix 中 的 Zuul 就 担任 了 这 样 的 一 个 角色 ， 为 微服 务 染 构 提 供 了 前 门 保护 
的 作用 , 同时 将 权限 控制 这 些 较 重 的 非 业 务 迪 辑 内 容 迁 移 到 服务 路 由 层面 , 使 得 服务 集群 主体 
能 够 具备 更 高 的 可 复 用 性 和 可 测试 性 。 

在 Spring Cloud 体系 中 ， Spring Cloud Zuul 封 狼 了 Zuul 组 件 ， 作 为 一 个 API 网 天 ， 人 负 贡 
提供 负载 均衡 、 反 同 代 理 和 权限 认证 。 


]17.3 zuul 工作 机 制 


17.3.1 过 滤 希 机 制 

Zuul 的 核心 是 一 系列 的 flters， 其 作用 类 似 Servlet 框架 的 Filter，Zuul 把 客户 闪 请 求 路 由 
到 业务 人 处理 逻辑 的 过 程 中 , 这些 filter 在 路 由 的 特定 时 期 参与 了 一 些 过 小 处 理 ， 比 如 实现 鉴 权 、 
流量 转发 、 请 求 统 计 等 功能 。Zuul 的 整个 运行 机 制 可 以 用 图 17-1 来 描述 。 
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17.3.2 ”过 滤器 的 生命 周期 


Filter 的 生命 周期 有 4 个 ， 分 别 是 “PRE”“ROUTING”“POST”“ERROR”， 束 个 生 
命 周 期 可 以 用 图 17-2 来 表示 。 
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记忆 


而 
pe 
本 
站 
四 
画 画 面 面 面 面 面 面 二 南面 击 夯 曾 吉 本 本 画 忆 画 二 届 届 再 忆 恒 面 届 而 画面 面 面 面 而 击 夯 击 


图 17-2 


基于 Zuul 的 这 些 过 小 融 可 以 实现 各 种 直 晤 的 功能 ， 而 这 些 过 小 胡 类 型 则 对 应 于 请 求 的 典 


型 生命 周期 。 


。 PRE: 这 种 过 滤器 在 请 求 被 路 由 之 前 调用 。 我 们 可 利用 这 种 过 滤器 实现 身份 验证 、 在 
集群 中 选择 请 求 的 微服 务 、 记 录 调 试 信息 等 。 

e。 ROUTING: 这 种 过 滤器 将 请 求 路 由 到 微服 务 。 这 种 过 滤器 用 于 构建 发 送 给 微服 务 的 请 
求 ， 并 使 用 Apache HttpClient 式 Netfilx Ribbon 请 青 来 微服 务 。 

e POST: 这 种 过 滤器 在 路 由 到 微服 务 以 后 执行 。 这 种 过 滤器 可 用 来 为 响应 添加 标准 的 
HTTP Header、 收 集 统计 信息 和 指标 、 将 响应 从 微服 务 发 送 给 客户 端 等 。 

e ERROR: 在 其 他 阶段 发 生 错 误 时 执行 该 过 滤器 。 


除了 默认 的 过 滤器 类 型 ，Zuul 还 允许 我 们 创建 自 定义 的 过 滤器 类 型 。 例 如 ， 我 们 可 以 定 
制 一 种 STATIC 类 型 的 过 滤器 ， 直 接 在 Zuul 中 生成 响应 ， 而 不 将 请 求 转发 到 后 端的 微服 务 。 


Zuul 默认 实现 了 很 多 Filter， 如 表 17-1 所 示 。 


表 17-1 Zuul 默认 实现 的 Filter 


本 
jpre |-3 | ServletDetectionFilter | 标记 处 理 Serviet 的 类 型 

pr Servlet30WrapperFilter 包装 HttpServletRequest 请 求 
让 
jroute |1 |DebugFiter | 标记 调试 标志 

EN PreDecorationFilter 处 理 请 求 上 下 文 ， 供 后 续 使 用 


RibbonRoutingFilter serviceld 请 求 转发 


Er rs SimpleHostRoutingFilter url 请 求 转发 
SendForwardFilter forward 请 求 转发 
I | SendErrorFilter 处 理 有 错误 的 请 求 响应 


SendResponseFilter 处 理 正常 的 请 求 响应 
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17.3.3” 茜 用 指定 的 Filter 


可 以 在 application.yml 中 配置 需要 禁用 的 fllter， 格 式 为 zuul.<SimpleClassName>. 
<filterType>.disable=true 。 比如 要 禁用 org.springframework.cloud.netflix.zuul.filters.post. 
SendResponseFilter， 进 行 如 下 设置 即 可 : 


ZUU1 : 
SendResponseFilter: 
Emsts 


disable: true 
实现 目 定 义 涯 器 需要 继承 ZuulFilter， 并 3 


public class MyFilter extends uulFilter 1 


目 定 义 Filter。 < 现 ZuulFilter 中 的 抽象 方法 。 


QOverride 
string filterType() I 
return "pre"; // 定义 filter 的 类 型 有 pre、route、post、error 四 种 


MOverride 
int filterordert)y 1 


return 5; // 定义 filter 的 顺序 ， 数 字 越 小 ， 表 示 顺 序 越 高 ， 越 先 执行 


QOverride 
boolean shouldFilter() 1 
return true; // 表示 是 否 需 要 执行 该 filter，true 表示 执行 ，false 表示 不 执行 


QOverride 
Object run() 1{ 


return null; // filter 需要 执行 的 具体 操作 


实现 案例 


17.4.1 ”新建 工程 
新 建 一 个 项 目 mango-zuul 作为 服务 网 关 ， 工 程 结构 如 图 17-3 所 示 。 
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eu > mango-zuul [mango dev] 


vv 国 > src/main/java 
》 名 > com.louis.mango.zuul 
Y 加 > src/main/resources 
BR application.ymnl 
区 banner'tbtt 
[本 src/test/java 
》 了 JRE System Library [JavasE-1.8] 
》 了 Maven Dependencies 
》 区:' > STC 
EE- target 
[3 pom.xml 


17-3 


17.4.2 ”添加 依赖 
添加 consul、zuul 的 相关 依赖 。 


pom.xml 


Tependencies> 
人 <dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring—cloud—starter—netflix—zuul</artifactId> 
</dependency> 
人 <dependency> 
<groupId>org.springframework.cloud</grouplId> 
<artifactId>spring-cloud-starter—-consul-discovervy</artifactId> 
</dependency> 


</dependencies> 


<dependencyManagement> 
-ependencies> 
<dependency> 
<gqrouplId>org.springframework.cloud</grouplId> 
<artifactId>spring-cloud-dependencies</artifactId> 
<version>${spring—-cloud.version}</version> 
<type>pom</type> 
<scope>import</scope> 
</dependency> 
</dependencies> 


</dependencyManagement> 


17.4.3 ”局 动 类 
为 司 动 类 添加 @EnableZuulProxy 注解 ， 开 局 服务 网 基文 持 。 
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MangoZuulApplication.java 


QEnablezZuulProxy 
QSpringBootApplication 
public class Mango2uulApplication | 


public static void main(Sstring[|] args) 1!{ 


SPIingApplication.runl(MangouulApplication.class, args); 


17.4.4 配置 文件 


配置 启动 端口 为 8010， 注 册 服 务 到 注册 中 心 ， 配 置 Zuul 转发 规则 。 这 里 配置 在 访问 
locathost:8010/feigin/call 和 ribbon/call 时 调用 消费 者 对 应 接口 。 


application.yml 


三 三 三 
port: 8010 
SPIInG: 
己 PPLICatIon : 
name: mango—zuul 
cloud: 
CONSUuUl: 
host: localhost 
port: 8200 
discovery: 
serviceName: ${spring.application.namel} # 注册 到 consul 的 服务 名 称 
Zul: 
Poutess 
ribbon: 
path: /ripbon/** 
serviceId: mango-consumer #¥ 转发 到 消费 者 /ribbon/ 
feigqgn: 
path: /feiqgn/** 
servicelId: mango—-consumer # 转发 到 消费 者 /feign/ 


17.4.5 页面 测试 


依次 司 动 注册 中 心 、 监 控 、 服 务 提供 音 、 服 务 消费 者 、 服 务 网 关 等 项 目 。 
访问 http://localhost:8010/ribbon/call， 效 果 如 图 17-4 所 示 。 
访问 http://localhost:8010/feign/call， 效 果 如 图 17-5 所 示 。 
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10 /ri t8010/feign/call 
< CG © localhost:8010/ribbon/call < CG © localhost8010/feign/call 


hello Mango ! hello Mango ! 


17-4 图 17-5 


说 明 Zuul 已 经 成 功 转发 请 求 ， 并 成 功 调用 后 闹 微 服务 。 


17.4.6 ”配置 接口 前 绥 


如 果 想 给 每 个 服务 的 API 接口 加 上 一 个 前 级 ， 可 使 用 zuul.prefix 进行 配置 。 例 如 ， 
http://localhost:8010/v1/feign/call， 即 在 所 有 的 API 接口 上 加 一 个 v1 作为 版 本 号 。 


UU]: 
下 下 已 于 二 /rl 
roules=: 
ribbon: 
path: /ribbon/** 
serviceId: kitty-consumer # 转发 到 消费 者 /ribbon/ 
feign: 
path: /feign/** 
serviceId: kitty-consumer #3 转发 到 消费 者 /feign/ 


17.4.7 默认 路 由 规则 
上 面 我 们 是 通过 添加 路 由 配置 进行 请 求 转发 的 ， 内 容 如 下 : 


ZUUL : 
routes: 

ribbon: 
path: /ripbbon/** 
serviceId: kitty-consumer # 转发 到 消费 者 /ribbon/ 

elgqn: 
path: /feign/** 
serviceId: kitty-consumer # 转发 到 消费 者 /feign/ 


但 是 如 果 后 六 微 服务 非常 多 ， 每 一 个 都 这 样 配 置 还 是 挺 麻烦 的 。Spring Cloud Zuul 已 经 帮 
我 们 做 了 默认 配置 。 默 认 情 况 下 ，Zuul 会 代理 所 有 注册 到 注册 中 心 的 微服 务 ， 并 且 Zuul 的 默 
认 路 由 规则 如 下 : http://ZUUL HOST:ZUUL PORT/ 微 服务 在 注册 中 心 的 serviceId/** 会 被 转发 
到 serviceId 对 应 的 微服 务 。 如 果 苯 循 献 认 路 由 规则 ， 基 本 上 束 没 什么 配置 了 。 

比如 我 们 直接 通过 serviceId/feigmcall 的 方式 访问 ， 也 是 可 以 正 稼 人 态 问 的 。 访 问 
http://localhost:8010/mango-consumer/feign/call， 后 结果 也 是 一 样 的 ， 如 图 17-6 所 示 。 
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EEN 


~ CG © localhost:8010/mango-consumer/feign/call 


hello Mango ! 


图 17-6 


17.4.8 路 由 熔断 


Zuul 作为 Netflix 组 件 ， 可 以 与 Ribbon、Eureka 和 Hystrix 等 组 件 相 绪 合 ， 实 现 负载 均衡 、 
炊 断 规 的 功能 。 堆 认 情 况 下 Zuul 和 Ribbon 相 结合 ， 实 现 了 负载 均衡 。 实 现 炊 断 硕 功 能 需要 实 
现 FallbackProvider 接口 。 实 现 该 接口 有 两 个 方法 : 一 个 是 getRoute0， 用 于 指定 熔断 器 功能 应 
用 于 哪些 路 由 的 服务 ; 另 一 个 方法 是 fallbackResponse0， 为 进入 熔断 器 功能 时 执行 的 逻辑 。 

创建 MyFallbackProvider 类 ，getRoute() 方 法 返回 "mango-consumer"， 只 针对 consumer 服 
务 进行 熔断 。 如 果 需 要 所 有 的 路 由 服务 都 加 熔断 功能 ， 需 要 在 getRoute0 方 法 上 返回 " * "匹配 
伯 ,getBody0 方 法 返回 友 送 炊 断 时 的 反馈 信息 , 这 里 在 上 友 达 和 炊 断 时 返 回信 息 "Sorry, the service is 


unavailable now."。 


MyFallbackProvider.java 


@Component 

public class MyFallbackProvider implements FallbackProvider I 
QOverride 
Public String getRoutet({} 1{ 


return “mango—Consumer™s 


QOverride 
Public ClientHttpResponse fallbackResponse (String route, Throwable cause) { 
Svstem.out .printint route:"+route); 
System.out .printiln("exception:"+tcause.getMessage (}); 
return new ClientHttpResponse() 1 
QOverride 
Public HttpStatus getStatusCode() throws IOException 1 
return Httpstatus .OFs; 
} 
QOverride 
public int qetRawStatusCode() throws IOException | 
return 200; 
} 
QOverride 
public String getstatusText() throws IOException 1{ 


Teturn "ok”™» 
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QOverride 

Bublic voidqd closel) 1 }] 

QOverride 

public InputSstream getBody(} throws IOException 1| 
return new ByteArraylinputstreaml("Sorry, the service 1s unavalilable 

now." .getBytes (}))}); 

} 

QOverride 

public HttpHeaders getHeaders(}) 1 
HttpHeaders headers = new HttpHeaders (); 
headers.setContentType (MedijiaType .APPLICATION JSON) : 


return headers; 


重新 局 动 ， 访 问 http://localhost:8010/mango-consumer/feign/call， 可 以 下 第 访问 ， 如 图 17-7 
所 示 。 

停 控 mango-consumer 服务 ,访问 http://localhost:8010/mango-consumer/feign/call， 返回 效 
果 如 图 17-8 所 示 。 


c CC © localhost8010/mango-consumer/feign/call € C © localhost:8010/mango-consumer/feign/call 


Sorry, the service 1s unavallable now. 


hello Mango ! 


17-7 17-8 


结 示 返回 了 我 们 目 定义 的 信息 ， 识 明 我 们 目 定 义 的 炊 断 奏 己 经 起 作用 了 。 


17.4.9 目 定 义 Filter 


创建 一 个 MyFilter， 继承 ZuulFilter 类 ， 覆 写 run0 方 法 逻辑 ， 在 转发 请 求 前 进行 token 认 
证 ， 如 果 请 求 没 有 携 市 token， 人 返回 "there is no request token" 提 示 。 


MyFilterJava 


@Component 
public class MyFlilter extends ZuulFilter { 
private static Logger log=LoggerFactory.getLogger (MyFilter.class)}); 
QOverride 
Public String filterType(} { 
return "pre"; // 定义 filter 的 类 型 有 pre、route、post、error 四 种 


QOverride 
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Public int filterOrder(}) 1 
return 0; // 定义 filter 的 顺序 ， 数 字 越 小 ， 表 示 顺 友 越 高 、 越 先 执行 
} 
QOverride 
Public boolean shouldFilter() 1 
return true; // 表示 是 否 需 要 执行 该 filter，true 表示 执行 ，false 表示 不 执行 
| 


QOverride 
PubBlic Object run(} throws ZuuUulExceptijion 1 
// filter 需要 执行 的 具体 操作 
RequestContext ctx = RequestContext.getcCurrentcontext () 7 
HttpServletRequest Tequest = ctx.getRequesast (}; 
String token = request.getParameter( token"™); 
System.out .printin (token); 
if (token~—=null}I1 
ctx.sSetSendzuulResponse (Talsel}):; 
ctx.setResponseSsStatusCode (401); 
try 1 
ctx.gqetResponse(})} .getWriter() .write( there 1s no request token ) > 
} catch (IOException e) [| 
.PrintSstackTrace (}s 
} 
Tet rlls 


} 


return null: 


这 样 ，Zuul 束 会 目 动 加 载 Filter 执行 过 滤 了 了。 重新 局 动 Zuul 项 目 ， 访问 
http://localhost:8010/mango-consumer/feign/call， 结 果 如 图 17-9 所 示 。 

请 求 时 市 上 token， 访 问 http://localhost:8010/mango-consumer/feign/call?token=111， 接 口 
返回 正确 结 示 ， 如 图 17-10 所 示 。 


一 (> (i) Ilocalhost801 0/mango-consumer/feign/call < GC © localhost:8010/mango-consumer/feign/call?token=111 


there 13 nm request token hello Mango | 


图 17-9 17-10 
Zuul 作为 API 服务 网 关 ， 不 同 的 客户 端 使 用 不 同 的 负载 将 请 求 统 一 分 发 到 后 端的 Zuul， 
再 由 Zuul 转发 到 后 端 服 务 。 为 了 保证 Zuul 的 高 可 用 性 ， 前 端 可 以 同时 开启 多 个 Zuul 实例 进 
行 负载 均衡 。 另 外 ， 在 Zuul 的 前 端 还 可 以 使 用 Nginx 或 者 F5 再 次 进行 负载 转发 ， 从 而 保证 
Zuul 的 局 可 用 性 。 
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追踪 (SIleufth、ZipKin) 


奏 同 


技术 青 景 


在 和 做 服务 染 构 中 ,， 随 看 业务 友 展 ， 系统 拆 分 村 致 系统 调用 链 路 人 钝 友 复 末 ,一 个 看 似 人 简 早 的 
前 病 请 求 可 能 最 终 需 要 调用 很 多 次 后 中 服务 才能 完成 , 那么 当 整 个 请 求 出 现 问题 时 , 我 们 很 难 
得 知 到 撒 是 哪个 服务 出 了 问题 导致 的 ,这 时 残 再 要 解决 一 个 问题 , 即 如 何 快 速 定 位 服务 故障 点 ， 
分 布 式 系统 调用 链 奶 踩 扩 术 台 此 诞生 了 。 


ZipKin 


ZipKin wp be Twitter 公司 提供 并 开放 源 代 人 码 分 布 式 的 跟 躁 系统 ， 它 可 以 帮助 收集 服务 
的 时 间 数 据 ， 决 微服 务 架构 中 的 延迟 问题 ， 包 括 数据 的 收集 、 存 储 、 合 找 和 展现 。 

每 个 服务 向 ZipKin 报告 定时 数据 ，ZipKin 会 根据 调用 关系 通过 ZipKin UI 生成 依赖 关系 
， 展 示 多 少 跟 踩 请 求 经 过 了 哪些 服务 ， 该 系统 让 开 肥 者 可 通过 一 个 Web 前 奖 轻 松 地 收集 和 
分 析 数 据 ， 例 如 用 户 每 次 请 求 服务 的 处 理 时 间 等 ， 可 非 钊 方便 地 监测 系统 中 存在 的 瓶颈 。 

ZipKin 提供 了 可 插 拔 数据 存储 方式 : In-Memory、 MySQL、Cassandra 以 及 Elasticsearch 。 
我 们 可 以 根据 需求 选择 不 同 的 存储 方式 ， 生 成 环境 一 和 股 都 需要 持久 化 。 我 们 这 里 采用 
Elasticsearch 作为 ZipKin 的 数据 存储 占 。 


Spring Cloud Sleuth 


一 般 而 言 ， 一 个 分 布 式 服务 奶 踩 系统 ， 主 要 由 3 部 分 组 成 : 数据 收集 、 数 据 和 存储 和 数据 
展示 。 

Spring Cloud Sleuth 为 服务 之 间 的 调用 提供 链 路 退 踩 ， 通 过 Sleuth 可 以 很 清 茎 地 了 解 到 一 
个 服务 请 求 经 过 了 哪些 服务 , 每 个 服务 处 理 人 花费 了 多 长 时 间 , 从 而 让 我 们 可 以 很 方便 地 理 清 各 
微服 务 间 的 调用 关系 。 此 外 ，Sleuth 还 可 以 帮助 我 们 : 


。 耗 时 分 析 : 通过 Sleuth 可 以 很 方便 地 了 解 到 每 个 采样 请 求 的 耗 时 ， 从 而 分 析出 哪些 服 
务 调 用 比较 耗 时 。 
e@ 可 视 化 错误 : 对 于 程序 未 捕捉 的 异常 ， 可 以 通过 集成 ZipKin 服务 在 界面 上 看 到 。 
。 链 路 优化 : 对 于 调用 比较 频 莹 的 服务 ， 可 以 针对 这 些 服 务实 施 一 些 优 化 措施 . 
Spring Cloud Sleuth 可 以 结合 ZipKin， 将 信息 必 运 到 ZipKin， 利 用 ZipKin 的 存储 来 存储 
信息 ， 利 用 ZipKin UI 来 展示 数据 。 


实现 么 例 


在 早 前 的 Spring Cloud 版 本 里 是 需要 自 建 ZipKin 服务 端的 ,但 是 从 Spring Cloud 2.0 以 后 ， 
官方 已 经 不 支持 自 建 Server 了 ， 改 成 提供 编译 好 的 jar 包 供用 户 使 用 。 这 里 使 用 的 是 2.0 以 后 
的 版 本 , 自 建 Server 的 方式 请 自行 到 百度 上 查看 。 这 里 我 们 使 用 Docker 方式 部 署 ZipKin 服务 ， 
并 采用 Elasticsearch 作为 ZipKin 的 数据 存储 占 。 


18.4.1 下 载 镜像 
此 前 请 先 安 装 好 Docker 环境 ， 使 用 以 下 命令 分 别 拉 取 ZipKin 和 Elasticsearch 镜像 。 


docker pull openzipkin/zipkin 


docker pull docker.elastic.co/elasticsearch/elasticsearch:6.3.0 


通过 docker limages 但 看 下 载 镜像 ， 如 几 18-1 所 示 。 


图 18-1 


18.4.2 ” 编 与 司 动 文件 

在 本 地 创建 如 下 文件 夹 结 构 ， 其 中 data 日 录用 来 存放 Elasticsearch 存储 的 数据 。 
dockerfile 

I- elasticsearch 

| I 一 data 


I- docker—compose.vyml 


编写 docker-compose 文件 ， 主 要 作用 是 批量 局 动容 器， 避免 在 使 用 多 个 容器 的 时 候 逐 个 
启动 。 
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docker-compose.yml 


VEersion: ™3" 


SeEIrVices: 


elasticsearch: 
image: docker.elastic.co/elasticsearch/elasticsearch:6.3.0 
container name: elastijcsearch 
restart: always 
networks: 
i 
Portis-: 
= “9200=:9200" 
“9300:93300" 


VOLuUmes : 


= .jelasticsearch/data: /usr/share/elasticsearch/data 


zipkin: 
image: openzipkin/zipkin:latest 
container name: Zipkin 
restart: always 
networks: 
= 
Portis: 
"9411:9411™ 
environment: 
- STORAGE TYPE~elasticsearch 
“ES HOSTS—elasticsearch 


networks: 


elk: 


关于 docker-compose.yml 文件 的 格式 及 相关 内 容 ， 请 目 行 到 白 度 网 站 搜索 。 


18.4.3 ”启动 服务 
以 命令 模式 进入 dockerfile 日 录 ， 执 行 局 动 的 命令 如 下 : 
docker—compose up -dd 


执行 过 程 如 图 18-2 所 示 。 


(ri 
[i 


a 


十 十 时 


下 六 EE 


Da O09 


区 


i 
a 
i 
二 


[ D 而 
旧 


D 


Ft 
0 09 


176 


执行 完成 之 后 ， 通 过 docker ps 命令 全 看 ， 发 现 ZipKin 和 Elasticsearch 确实 月 动 起 来 了 ， 
如 图 18-3 所 示 。 


图 18-3 


到 这 里 ，ZipKin 服务 端 就 搭建 起 来 了 ， 访 问 http://localhost:9411， 效 果 如 图 18-4 所 示 。 
因为 还 没有 客户 端 ， 所 以 还 没有 数据 。 


Lookback 
naur 


Duration (ws) Limit 


min 必 


Please select the criteria for yeur trace laokup. 


图 18-4 


这 里 我 们 采用 了 Elasticsearch 作为 存储 方式 ， 如 果 想 简单 通过 内 存 方 式 启动 ， 无 须 
安装 Elasticsearch， 直 接 启 动 一 个 ZipKin 容器 即 可 。 


到 
细 l 


docker run -QG -p 9411:9411 openzipkin/zipkin 


如 果 想 使 用 其 他 方式 (如 数据 库 等 ) 和 存储， 请 合 询 相关 配置 文档 。 

ZipKin 服务 端 已 经 搭建 完成 了 了 ， 接 下 来 我 们 来 实现 客户 端 。 
18.4.4 ”; 东 加 依赖 

修改 mango-consumer 项 目 Maven 配置 ， 添 加 ZipKin 依赖 。 


pom.xml 


l=— TIDkinn ~ 


<dependency> 
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<groupId>org.springframework.cloud</groupId> 
<artifactIid>spring—cloud—starter—zipkin</artifactlId> 


</dependency> 


18.4.5 配置 文件 
修改 配置 文件 ， 添 加 如 下 ZipKin 配置 。 
application.yml 


SpIrIing: 
ik im: 
base—url: http://localhost:9411/ 
sleuth: 


sampler: 


probability: 1 # 样 本 采集 量 ， 默 认为 0.1 


18.4.6 ”页 面 测试 


先后 局 动 注册 中 心 、 服 务 监 控 、 服 务 提供 者 、 服 务 消 费 者 。 反 复 访 问 几 亿 
http://localhost:8005/feign/call， 产 生 ZipKin 数据 ， 如 图 18-5 所 示 。 


GC © localhost:8005/feign/call 


hello Mango ! 


18-5 


再 次 访问 http:/localhost:9411， 发 现 出 现 了 我 们 刚刚 访问 的 服务 ， 选 择 服务 并 单 击 Find 
Traces 按钮 退 踩 ， 如 图 18-6 所 示 。 


service Name span Name Lookback 


span Name 1 meur 


Duration (us) Limit Sort 


玉 三 


ar and cluster=foo ar 10 Longest  ? 


1. 选择 服务 
2. 单 击 Find Traces 追踪 


Please select the criteria for your trace lookup. 


图 18-6 
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退 肾 之后， 页面 显示 出 相关 的 服务 调用 信息 ， 如 图 18-7 所 示 。 


Laokback 
1 hau 
Annotations Querny Duration (ps) > 


e.g, hitp,path= /toon/bar and cluster=foo and cache,.miss” 
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蛙 击 调用 记录 合 看 详 悄 页 和 面 ， 可 以 看 到 每 一 个 服务 上 所 耗 络 的 时 间 和 顺序 ， 如 图 18-8 所 示 。 


' -consumer.post: 26.730mE 


AKA;: mas:Consurer 


2018/1 7 下 午 62946 Client Sernd 10.0.75.1 Bee-consurmer) 


2018717 下 午 62 针 四 2 ?730ms Clent Recerve 10.075.1 econsurmer) 


htp.methad pOsT 


hutp.path Minatances 


18-8 
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技术 月 景 


如 今 微 服务 架构 盛行 ， 在 分 布 式 系统 中 ,项目 日 益 庞大 ， 子 项 目 日 益 增多 ,每 个 项 目 都 散 
沙 着 各 种 配置 文件 ， 且 随 着 服务 的 增加 而 不 断 增多 。 此 时 ， 往 往 某 一 个 基础 服务 信息 变更 都 会 
导致 一 系列 服务 的 更 新 和 重 司 ， 运 维 也 是 可不 堪 言 ， 而 且 还 很 容易 出 错 。 配 置 中 心 便 由 此 应 运 
而 生 了 。 

目前 市 面 上 开源 的 配置 中 心 很 多 , 像 Spring 家 族 的 Spring Cloud Config、 Apache 的 Apache 
Commons Configuration、 淘 宝 的 diamond、 百 度 的 disconf、360 的 QConf 等 ， 痢 是 为 了 解决 这 
关 问 题 。 当 下 Spring 体系 大 行 其 道 ， 我 们 也 优先 选择 了 Spring Cloud Config。 


Spring Cloud Config 


Spring Cloud Config 是 一 父 为 分 布 式 系统 中 的 基础 设施 和 微服 务 应 用 提供 集中 化 配置 的 
官 理 方案 , 分 为 服务 问 与 略 尸 端 两 个 部 分 。 服务 病 也 称 为 分 布 式 配置 中 心 ， 是 一 个 独立 的 微服 
务 应 用 , 用 来 连接 配置 仓库 并 为 客户 端 提 供 获 取 配 置信 息 。 客 户 端 是 微服 务 架构 中 的 各 个 微服 
务 应 用 或 基础 设施 , 它们 通过 指定 的 配置 中 心 来 管理 服务 相关 的 配置 内 容 , 并 在 局 动 的 时 候 从 
配置 中 心 获取 和 加 载 配置 信息 。 

Spring Cloud Config 对 服务 上 顺和 客户 关中 的 环境 变量 和 属性 配置 实现 了 抽象 映射 ， 所 以 除 
了 适用 于 Spring 应 用 ， 也 是 可 以 在 任何 其 他 语言 应 用 中 使 用 的 。Spring Cloud Config 实现 的 配 
置 中 心 默 认 采 用 Git 来 存储 配置 信息 ， 所 以 使 用 Spring Cloud Config 构建 的 配置 服务 嚣 天然 就 
文 持 对 微服 务 应 用 配置 信息 的 版 本 管理 , 并 且 可 以 通过 Git 客户 端 工具 非常 方便 地 管理 和 访问 
配置 内 容 。 当 然 它 也 提供 了 对 其 他 存储 方式 的 文 持 ， 比 如 SVN 仓库 、 本 地 化 文件 系统 等 。 


FE i NS 


1 多 .了 实现 案例 


19.3.1 准备 配置 文件 
首先 在 GIT 下 新 建 一 个 config-repo 目录 ， 用 来 存放 配置 文件 ， 如 图 19-1 所 示 。 这 里 分 别 
模拟 了 3 个 环境 的 配置 文件 。 
B 朝 雨 忆 轻 尘 ( Louis ) 最 后 提交 于 刚刚 配置 中 心 仓库 
. 
因 .keep [a 朝 雨 忆 轻 全 (Louis) new dir config-repo 
consumer-dev.properties 人 B 朝 雨 忆 轻 尘 ( Louis ) ”配置 中 心 仓库 


国 consumer-pro.properties [a 朝 雨 忆 轻 尘 ( Louis ) ”配置 中 心 仓库 


consumer-test.properties 仿 朝 雨 记 轻 全 (Louis ) ”配置 中 心 仓库 


19-1 


分 别 编辑 3 个 文件 ， 配 置 hello 属性 的 值 为 “consumer.hello=hello， xx configurations.”， 
如 图 19-2 所 示 。 


目 consumer-dev.properties 32 Bytes 


衣 雨 忆 轻 尘 ( Louis ) 提交 于 6 分 钟 前 . 配置 中 心 仓库 


hello=hello, dev confieurations. 


19-2 


19.3.2 服务 闹 实 现 
1. 新 建 工程 


新 建 mango-config 工程 ， 作 为 配置 中 心 的 服务 器 ， 负 责 把 GIT 仓库 的 配置 文件 发 布 为 
RESTFul 接口 ， 如 图 19-3 所 示 。 


2. 添加 依赖 
除了 Spring Cloud 依 顿 之 外 ， 另 需 添 加 配置 中 心 依 顿 包 。 
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v 此 > mango-config [mango dev] 
ww [Ec > sre/ main/java 
vw 极 > com.louis.mango.config 
[BB MangoConfigApplication.java 
w 四 > src/main/resources 
国 application.yml 
民 banner.bt 
ES src/test/java 
;二 \ JRE System Library [Java5E-1.8] 


19-3 
pom.xml 
<1——spring config——> 
<dependencies> 
<dependency> 


<groupId>org.springframework.cloud</grouplId> 
<artifactIid>spring-cloud-config-server</artifactId> 
</dependency> 


</dependencies> 
3. 局 动 类 
启动 类 添加 注解 @EnableConfigServer， 开 启 配 置 服务 支持 。 
MangoConfigApplication.java 


QEnableDiscoveryClient 
@EnableConfigServer 
QSpringBootApplication 

public class MangoConfigApplication I 


public static void main(Stringl] args) I 
SpringApplication.run(MangoConfigApplication.class, args); 


4. 配置 文件 


修改 配置 文件 ,添加 如 下 内 容 。 如 果 是 私有 仓库 ， 需 要 填写 用 户 名 、 密 码 ; 如 果 是 公开 仓 
库 ， 可 以 不 配置 密码 。 
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application.yml 


本 计生 J 
port: 8020 
SpI1nNg: 
application: 
name: mango—config 
cloud: 
CoOnsul: 
host: localhost 
port: 8200 
discovery: 
ServyviceName: ${spring.application.namel} # 注册 到 consul 的 服务 名 称 
config: 
label: master 上 git 仓库 分 去 
三 三 
可: 
uri: https://gitee.com/liuge1988/mango.git 看 配置 git 仓库 的 地 址 
search-paths: src/config-repo # git 仓库 地 址 下 的 相对 地 址 ， 可 配置 多 个 ， 片 分 割 
username: username # git 仓库 的 账号 
password: password # git 仓库 的 密码 


Spring Cloud Config 也 提供 本 地 存储 配置 方式 , 只 十 人 设置 属 
Config Server 会 默认 从 应 用 的 src/main/resource 目录 下 检索 配置 文件 。 另 外 ， 也 可 以 通过 
spring.cloud.config.server.native.searchLocations=file:D:/properties/ 属 性 来 指定 配置 文件 的 位 置 。 
虽然 Spring Cloud Config 提供 了 这 样 的 功能 , 但 是 为 了 更 好 地 支持 内 容 害 理 和 版 本 控制 , 还 是 
推荐 使 用 GIT 的 方式 。 

5. 页 面 测试 

局 动 注册 中 心 ， 配 置 中 心服 务 ， 访 问 http://localhost:8020/ consumer/dev， 返 回 dev 配置 文 
件 的 全 忆 o 


{ 


性 spring.profiles.active=native， 


"mame”: "consumer”, 
二 
"label™: null, 
"version™": “feab08409500b3626e3f 10f3b4d24f 1d0cb93efc", 
"state”™: null, 
"propertySources"”: |1 
"name": "https://gitee.com/liugel1988/mango.9git/src/config-repol/ 
Consumer—dev.properties", 
"source”™: 1 


"hel11o": "hello, dev configurations.™" 
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} 
}] 
} 
访问 http://localhost:8020/consumer/pro， 人 返回 pro 配置 文件 的 信息 。 
{ 


"name”: "Consumer”, 
“Brotiles -=o praoa ls 
“label”™: nouall, 
"version™"™: "feab08409500b3626e3f 710f3b4d24fiid0cbh93efc", 
“state”™: null, 
"propertySources™: [1 
"name": "https://gitee.com/liugel1988/mango.git/src/config—repol/ 
Consumer-pro.properties", 
"source™: 1 


"hello™": "hello, pro configurations." 


}] 


上 述 的 返回 信息 包含 了 配置 文件 的 位 置 、 版 本 、 配 置 文 件 的 名 称 以 及 配置 文件 中 的 具体 内 
容 ， 说 明 server 新 已 经 成 功 著 取 了 GIT 仓库 的 配置 信息 。 
访问 http://localhost:8020/consumer-dev.properties， 人 返回 结果 如 图 19-4 所 示 。 


OO © localhost:8020/consumer-dev.properties 


hello: hello, dew contiauratlions. 


19-4 
将 dev 配置 文件 的 内 容 修 改 为 “hello, dev configurations 2.”， 如 图 19-5 所 示 。 


master™ mango/ src / config-repo / consumer-dev.properties 


E] consumer-dev.properties 34 Bytes 


朝 南 忆 轻 全 ( Louis ) 提交 于 刚刚 . 更 新 consumer-dev.properties 


hello=hello, dev configurations 2， 


19-5 


再 次 访问 http:Wlocalhost:8020/consumer-dev.properties， 返 回 结果 如 图 19-6 所 示 。 
发 现 读 取 的 是 修改 后 提交 的 信息 ， 说 明 服 务 端 会 目 动 读 取 最 新 提 交 的 数据 。 
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(> © localhost8020/consumer-dev.properties 


hello: hello, devw contieuratlions 二 


图 19-6 
仓库 中 的 配置 文件 会 被 转换 成 相应 的 Web 接口 ， 访 问 可 以 参照 以 下 规则 : 


e /{application}/{profile}|/{label}| 

e /{application}-{profile}.yml 

e /{label}/{application}-{profile}.yml 

e /{application}-{profile}.properties 

es /{label}/{application}-{profile}.properties 


以 consumer-dev.properties 为 例 ， 它 的 application 是 consumer、profile 是 dev。 客 亡 闪 会 


根据 填写 的 参数 来 选择 读 取 对 应 的 配置 。 
19.3.3 ”客户 端 实 现 


1. 添加 依赖 
打开 mango-consumer 工程 ， 洪 加 相关 依赖 。 


pom.xml 
< 一 一 spring—cloud—contfig 一 一 > 
<dependency> 


<groupId>org.springframework.cloud</groupId> 
<artifactIid>spring—cloud-starter—config</artifactId> 


</dependency> 
2. 配置 文件 


添加 一 个 bootstrap.yml 配置 文件 ， 添 加 配置 中 心 ， 并 把 注册 中 心 的 配置 移 到 这 里 ， 因 为 
在 退 过 配置 中 心 合 找 配置 时 需要 如 过 注册 中 心 的 友 现 服务 。 


bootstrap.yml 


SpIring: 
Cloud: 
consul: 
host: localhost 
Port: 8200 
discovery: 
serviceName: {spring.application.name} # 注册 到 consul 的 服务 名 称 


config: 
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discovery: 

enabled: true # 开启 服务 发 现 

servyvicelId: mango—-confiq 二 配置 中 心服 务 名 称 
name: consumer # 对 应 {applicationj} 部 分 
profile: dev 站 对 应 {profilej} 部 分 


label: master # 对 应 git 的 分 支 ， 如 果 配 置 中心 使 用 的 是 本 地 存储 ， 则 该 参数 无 用 
配置 说 明 : 
e spring.cloud.config.uri:t 配置 中 心 的 具体 地 址 。 
e spring.cloud.config.name: 对 应 {application} 部 分 。 
e spring.cloud.config.profile: 对 应 {profile} 部 分 。 
e spring.cloud.config.label: 对 应 git 的 分 支 。 如 果 配 置 中心 使 用 的 是 本 地 存储 ， 则 该 参数 


无 用 。 
e spring.cloud.config.discovery.service-id: 指定 配置 中 心 的 service-id， 便 于 扩展 为 高 可 用 
配置 集群 。 


上 面 这 些 与 spring cloud 相关 的 属性 必须 配置 在 bootstrap.yml 中 ， 这 样 config 部 分 
内 容 才 能 被 正确 加 载 ,因为 config 的 相关 配置 会 先 于 application.yml, 而 bootstrap.yml 
的 加 载 也 是 先 于 application.yml 文件 的 。 


注 意 


application.yml 


言语] 和 J 
port: 8005 
SpIring: 
application: 
name: mango—consumer 
boot: 
admin: 
lienk: 
url: "http://localhost:8000" 
Tikine: 
base—url: http://localhost:9411/ 
sleuth: 
sampler: 
probability: 1 # 样 本 采集 量 ， 默 认为 0.1 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
ennsures 
i 


endpoint: 
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health: 
show—details: ALWAYS 
# 开 局 熔断 器 
下 人 IOnm : 
hystrixx: 


enabled: true 
3. 控制 话 
添加 一 个 SpringConfigController 控制 右 ， 添 加 注解 @Value("$ {hello}")， 声 明 hello 属性 
从 配置 文件 读 取 。 
SpringConfigController.java 


GRestController 


class SpIingConfigController 1 
QValue ("$ {hello}™) 
private String hello; 


@RequestMapping("/hello") 
Public String from(}) I 


return this.hello; 


4. 页 面 测试 


启动 注册 中 心 、 配 置 中 心 和 服务 消费 者 ， 访 问 http://localhost:8005/hello， 返 回 结果 ， 如 
图 19-7 所 示 。 


所 GG DD localhost:8005/hello 


hello, dev configurations 2. 


19-7 


说 明 客户 靖 已 经 成 功 从 服务 问 读 取 了 配置 信息 。 
现在 手动 修改 一 下 仓库 配置 文件 的 内 容 ， 移 除 末 尾数 字 2， 修 改 完 成 并 提交 ， 如 图 19-8 
所 示 。 


master= -mange,/ sre / cenfig-repe / coensumer-dev.properties 


El consumer-dev.properties 34 Bytes 


一 


对 用 忆 和 图 全 (Louis ) 提交 于 16 小 时 前 . 更 新 consumer-dev.properties 


hello=hello, dev configurations. 


19-8 
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然后 再 次 访问 http:Wlocalhost:800S2/hello， 返 回 结果 如 图 19-9 所 示 。 


图 19-9 


我 们 发 现 返 回 结果 并 没有 读 取 最 新 提交 的 内 容 ， 这 是 因为 Spring Boot 项 目 只 有 在 启动 的 
时 候 才 会 获取 配置 文件 的 内 容 ， 虽 然 GIT 配置 信息 被 修改 了 ,但 是 客户 ett bi 
所 以 寻 致 读 取 的 信息 仍然 是 旧 配 置 。 那 么 该 如 何 去 解 决 这 个 问题 呢 ? 这 融和 是 我 们 后 续 要 讲 的 
Spring Cloud Bus 。 


19.3.4 Refresh 机 制 


我 们 在 上 面 讲 到 ，Spring Boot 程序 只 在 局 动 的 时 候 加 载 配 置 文 件 信 息 ， 这 样 在 GIT 仓库 
配置 修改 之 后 , 虽然 配置 中 心服 务 右 能 够 读 取 最 新 的 提交 信息 , 但 是 配置 中 心 客户 端 却 不 会 草 
新 读 取 ， 以 至 于 不 能 及 时 地 读 取 更 新 后 的 配置 信息 。 这 时 就 需要 一 种 通知 刷新 机 制 来 变 持 了 。 

Refresh 机 制 是 Spring Cloud Config 提供 的 一 种 刷新 机 制 ， 它 允许 客户 疹 通 过 POST 方法 
触发 各 目的 /refresh， 只 要 依赖 spring-boot-starter-actuator 包 束 拥有 了 /refresh 的 功能 。 下 面 我 们 
为 客户 疾 加 上 刷新 功能 ， 以 文 持 更 新 配置 的 该 取 。 

1. 添加 依赖 

我 们 的 mango-consumer 在 之 前 已 经 添加 过 actuator 依赖 ， 所 以 这 里 就 不 用 添加 了 ， 如 果 
之 前 没有 湛 加 束 裔 要 加 上 。actuator 是 健康 检 枉 依赖 包 ， 依 赖 包 里 携 市 了 /refresh 的 功能 。 
<dependency> 

<grouplId>org.springframework.boot</groupId> 


<artifactId>spring-boot—starter—actuator</artifactId> 


</dependency> 

在 使 用 配置 属性 的 类 型 中 加 上 @RefreshScope 注解 ， 这 样 在 客户 端 执行 /refresh 的 时 候 
束 会 刷新 此 类 下 和 面 的 配置 属性 了 。 

SpringConfigController.java 
@Refreshscope 


@RestController 


class SpringConfigcCcontroller 1 


QValue ("$ {hello}™) 
private String hello; 


QRequestMapping("/hello") 
Public String from() I 
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return this.hello; 


2. 修改 配置 
健康 检查 接口 开放 需要 在 配置 文件 添加 以 下 内 容 ， 开 放 Refresh 的 相关 接口 ， 因 为 这 个 我 
们 在 之 前 配置 过 了 ， 所 以 就 不 需要 添加 了 。 
# 开放 健康 检查 接口 
management: 
endpoints: 
web: 
二 
nl 
endpoijint: 
health: 
show—details: ALWAYS 


授 过 上 和 面 的 接口 开放 配置 ， 以 后 以 post 请 求 的 方式 访问 http://localhost:8005/actuator/ 
refresh 时 就 会 更 新 修改 后 的 配置 文件 了 了 。 


?7 这 里 存在 着 版 本 大 坑 , 1x 跟 2.x 的 配置 不 太一 样 , 我 们 用 的 是 2.0+ 版 本 ,务必 注意 。 
注意 (1) 安全 配置 变更 


新 版 本 为 : management.endpoints.web.exposure.include 
(2) 访问 地 址 变更 

新 版 本 为 : http://localhost:8005/actuator/refresh 

老 版 本 为 : http://localhost:8005/refresh 


| | 


这 里 解释 一 下 上 和 面 这 个 配置 起 到 了 什么 具体 作用 。 其 实 ，actuator 是 一 个 健康 检查 包 ， 提 
供 了 一 些 健 康 检 查 数 据 接口 。Refresh 功能 是 其 中 的 一 个 接口 ， 为 了 安全 起 见 ， 默 认 只 开放 了 
health 和 info 接口 (启动 信息 会 包含 如 图 19-10 所 示 的 信息 ) ， 而 上 面 的 配置 就 是 设置 要 开放 
哪些 接口 , 我 们 设置 成 “*”, 是 开放 所 有 接口 。 也 可 以 指定 开发 几 个 , 比如 health、 info、 refresh,， 
而 这 里 因为 我 们 需要 用 的 是 Refresh 功能 ， 所 以 需要 把 Refresh 接口 开放 出 来 。 


Exposing 2 endpoint(s) beneath base path “actuator 
Mapped "{[/actuator/health|],methods=[GET],produces=[application/vnd.spri 


Mapped “{[/actuator/info],methods=[GET],produces=[application/vnd,.spring 
Mapped “{[/actuator|],methods=[GET],produces=[application/vnd.spring-boot 


图 19-10 


设置 成 “*” 后 ， 启 动 信息 会 包含 以 下 信息 ， 这 个 叫 refresh 的 post 方法 就 是 我 们 需要 的 ， 
上 面 说 的 接口 地 址 变更 从 这 里 也 可 以 看 得 出 来 ， 如 图 19-11 所 示 。 
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"{[7actuatoryarchaius],methods=[GET],produces=[applicationyvnd.spring-boot.actuator.v2+json || appli 
| "{[/actuator/auditevents],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || af 
"{[/actuator/beans] ,methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || applicat 
"{[/actuator/health],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || applics 
| “{[/actuator/conditions] ,methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || apF 
"{[/actuator/configprops],methods=[GET],produces=[application/vnd.spring-boot.actuator .v2+json || af 
"{[/actuator/env] ,methods=[GET],produces=[application/vnd.spring-boot.actuator .v2+json || applicatic 
"{[/actuator/env/{toMatch}] ,methods=[GET],produces=[application/vnd. spring-boot.actuator.v2+json || 
"{[/actuator/env] ,methods=[POST],consumes=[application/vnd.spring-boot.actuator.v2+json || applicati 
"{[/actuator/env] ,methods=[DELETE],produces=[application/vnd.spring-boot.actuator.v2+json || applics 
"{[/actuator/info],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || applicati 
"{[/actuator/loggers],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || applic 
"{[/actuator/lJoggers/{name}],methods=[GET],produces=[application/vnd.spring-boot.actuator .v2+json | | 
"{[/actuator/loggers/{name}],methods=[POST],consumes=[application/vnd.spring-boot.actuator.v2+json | 
| "{[/actuator/heapdump] ,methods=[GET],produces=[application/octet-stream]}” onto public java.lang.Obj 
"{[/actuator/threaddump] ,methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || apF 
| "{[/actuator/metrics] ,methods=[6ET],produces=[application/vnd.spring-boot.actuator.v2+json || applirc 
| "{[/actuator/metrics/{requiredMetricName}],methods=[6ET],produces=[application/vnd.spring-boot.actus 
| "{[/actuator/scheduledtasks],methods=[6ET],produces=[application/vnd.spring-boot.actuator .v2+json || 
"{[/actuator/httptrace],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || app] 
| ee shee spring-boot.actuator .v2+json || appli 
tuat' Em =[ POST cation, | ot .actuator.v2+json || appli 

| sproduc Cc 1 .spring-boot.actuator.v2+json || appli 
ati re de ee i nie a pl he spring-boot.actuator .v2+]json 
"{[/actuator/service-registry|,methods=[POST|,consumes=[application/ynd.spring-=-boot.actuator .v2+]jsor 
"{[/actuator/consul],methods=[GET],produces=[application/vnd.spring-boot.actuator.v2+json || applics 
"{[/actuator] ,methods=[GET],produces=[applicationAvnd.spring-boot.actuator.v2+json || application/js 
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页 面 测 试 
重新 启动 服务 ， 访 问 http:Wlocalhost:800S/hello， 返 回 结 果 如 图 19-12 所 示 。 


< GG © localhost:8005/hello 


hello, dev configurations 2. 
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修改 仓库 配置 内 容 ， 末 尾 加 个 数字 5， 如 图 19-13 所 示 。 


El consumer-dev.properties 34 Bytes 


朝 南 忆 轻 尘 ( Louis ) 提交 于 刚刚 . 更 新 consumer-dev.properties 


hello=hello, dev configurations 5， 
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再 次 访问 http://localhost:8005/hello， 如 我 们 所 料 ， 结 果 并 没有 更 新 ， 因 为 我 们 还 没有 调 
refresh 方法 。 通 过 工具 或 目 写 代码 上 有 友 送 post 请 求 http://localhost:8005/actuator/refresh， 刷 新 配 
置 。 这 里 通过 在 线 汕 试 网 站 及 运 ， 地 址 为 https://getman.cn/Mo2FX 。 


先 让 你 的 Chrome 支持 跨 域 。 设置 方法 是 ， 在 快捷 方式 的 target 后 加 上 
注意 --disable-web-security --user-data-dir, 重启 即 可 ， 如 图 19-14 所 示 。 
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POST = http://localhost:8003/actyuator/retresh 


1 Ee 


Request 


Body Header Content-Type = | 3 


Content-Type: applicationijson 


Response 


Body Header 


[ 
"Contie,. client. version", 
"hello”™ 

] 


图 19-14 


刷新 之 后 ， 再 次 访问 http://localhost:8005/hello， 返 回 结果 如 图 19-15 所 示 。 


GG © localhost8005/hello 


hello, dev configurations 5. 


合 看 返回 结果 , 刷新 之 后 已 经 可 以 获取 最 新 提交 的 配置 内 容 , 但 是 每 次 都 需要 手动 刷新 客 
己 问 还 是 很 态 烦 ,如果 客户 端 数 量 一 多 就 体 有 难以 妨 受 了 , 有 没有 什么 比较 好 的 办 法 来 解决 这 
个 问题 呢 ? 那 是 当然 的 ， 答 案 丈 是 : Spring Cloud Bus。 


19.3.5 Spring Cloud Bus 


Spring Cloud Bus 被 大 家 称 为 消息 总 线 ， 通 过 轻 量 级 的 消息 代理 来 连接 各 个 分 布 的 节点 ， 
可 以 利用 像 消 息 队 列 的 广播 机 制 在 分 布 式 系 统 中 进行 消息 传播 .通过 消息 总 线 可 以 实现 很 多 业 
务 功能 ， 其 中 对 于 配置 中 心 客 户 痛 刷 新 加 是 一 个 非 彰 典型 的 使 用 场景 。 图 19-16 可 以 很 好 地 解 


config-repo clientA 


configServer 亏 


1. bus/refresh 
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Spring Cloud Bus 进行 配置 更 新 的 步骤 如 下 : 
(1) 提交 代码 触发 post 请 求 给 /actuatorbus-refresh 。 
(2) Server 闹 接 收 到 请 求 并 发 送 给 Spring Cloud Bus 。 
(3) Spring Cloud bus 接 到 消息 并 通知 给 其 他 客户 疹 。 
(4) 其 他 客户 凯 接 收 到 通知 ， 请 求 Server 痕 煞 取 最 新 配置 。 
(5) 全 部 客 己 闪 均 获取 到 最 新 的 配置 。 
1. 安 半 RabbitMQ 
姑 为 我 们 需要 用 到 消息 队列 ， 所 以 这 里 选择 RabbitMQ， 使 用 Docker 进行 安装 。 
(1) 拉 取 镜像 
执行 以 下 命令 ， 拉 取 镜 像 : 
docker pull rabbitmgq:management 
完成 之 后 执行 以 下 命令 全 看 下 载 镜 像 : 
docker images 
合 看 镜像 列表 ， 如 图 19-17 所 示 。 


站 站 Ne Ee SE 
raoaot@iTufeeorah de i 
LU 证 生硬 有 二 让 二 和 | Fa 

L + 


Be BE | 
| | 
= 下 
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执行 以 下 命令 ， 创建 Docker 容器 : 


docker run -dd 一 一 Dame Tabbitmg -p 323611:5611 -Pbl2:oolf2 -4369243693 —p 2250612:25612 
-Dp 1561L:12611 -pp 15256122:156172 rabbitmg:management 


局 动 成 功 之 后 ， 可 以 执行 以 下 命令 全 看 局 动容 占 : 


docker ps 


合 看 局 动容 级， 如 图 19-18 所 示 。 
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(3) 登录 界面 


容器 启动 之 后 就 可 以 访问 Web 管理 界面 了 (访问 http:// 宿 主机 IP:15672)。 
系统 提供 了 默认 账号 : 用户 名 为 guest， 密 码 为 guest， 如 图 19-19 所 示 。 


< GQ 加 不 安全 | 139.196.87.48:15672 


出 RabbItMO 


Username: guest 
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EE 


官 理 卉 和 面 如 图 19-20 所 示 。 
2. 客户 端 实现 


(1) 添加 依赖 
打开 客户 疾 mango-consumer， 添 加 消 晨 总线 相关 依赖 。 


由 R qd bb It \ |, 7 Enam 20.3.8.5 
Can nriinns TF ha rms Farhanrnes ue 站 rsiam 


Overview 

* Tetals 
Fume rea bal eeiiralse 7 
Cyurments da 
Hisstj el F ele li fi 沁 
Curmantds ye 


Sabal cournis 


Fils thesrrilis 2 rk shearrplis 3 Prantl rrr Mi 7 Ne 二 二 Li 下 局 站 


a 0 i CD 1 
Es 


NN 7 nlnle 9 hi 二 I es rr 


r Fnrts mn Cem 


ES 和 dhe 


LE 


HTTPAPT Semnver Docs CC Tutonals CC Commummy Suppodt Commmunity Shyck Comnverciyl supot CPluglns GRHub Chasmpelg 


图 19-20 
pom.xml 
<1—— bus—amap 一 一 > 
<dependency> 


<grouplId>org.springframework.cloud</groupId> 


<artifactId>spring-cloud-starter-bus-amgqp</artifactId> 


</dependency> 


(2) 修改 配置 


添加 RebbitMQ 的 相关 配置 ， 这 样 客户 病人 代码 束 改 造 完成 了 。 


Bslesdrsl SH-77 Te:Je:#4 Palimsll symry 与 mmrela 。 重 | 


Viruad hest | 2 " | 
Cleer rabblts577299bdLLcd 


本 LT 


网 局 二 村 天 柄 二 
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bootstrap.yml 


SpIrIing: 
Cloud: 
consul: 
host: localhost 
port: 8200 
discovery: 
serviceName: ${spring.application.name} # 注册 到 consul 的 服务 名 称 
config: 
discovery: 
enabled: true 站 开局 服务 发 现 
SerViceId: mango—-confiq 二 配置 中 心服 务 名 称 
name: consumer # 对 应 {application} 部 分 
profile: dev # 对 应 {profile} 部 分 
label: master 站 对 应 git 的 分 文 ， 如 果 配 置 中 心 使 用 的 是 本 地 存储 ， 则 该 参数 无 用 
TabpbpILtrmda : 
host: localhost 
Port: oJ612 
username: guest 


password: guest 


3. 服务 病 实 现 
(1) 添加 依赖 
修改 mango-config， 添 加 相关 依赖 。 
pom.xml 
<dependency> 


<groupId>org.springframework.boot</groupId> 
<artifactId>spring-boot-starter-actuator</artifactId> 
</dependency> 
<dependency> 
<groupId>org.springframework.cloud</groupId> 
<artifactId>spring—cloud-starter—bus—amgp</artifactId> 


</dependency> 
(2 ) 修改 配置 
添加 RabbitMQ 和 接口 开放 相关 的 配置 ， 这 样 服务 病人 代码 就 改造 完成 了 。 
application.yml 


SpI1nNg: 
rabbitma: 
host: localhost 
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Port: oJ612 
username: gquest 


password: guest 
页 面 测试 
(1) 局 动 服 务 病 ， 成 功 集成 消 妃 总 线 后 ， 局 动 信 息 中 可 以 看 到 如 图 19-21 所 示 的 信息 。 


“"{[/actu 7 和 res | nethods=[GET] Te si pp li, a boot. cli 
"{[/actuator/service-registry|,methods=[POST|,consumes=[application/vnd.spring-boo 
“"{[/actuator/service-registry|,methods=[GET|,produces=[application/vnd.spring-boot 


图 19-21 


(2) 局 动 客 户 疾 ， 发 现 居 然 报 错 了 。 在 网 上 找 不 到 相关 资料 ， 也 没 见 其 他 人 提 过 相关 问 
猜测 网 上 教程 多 是 使 用 Euraka， 而 这 里 用 的 是 Consul。 不 想 换 回 Euraka，2.0 停止 开发 消 
恩 出 来 以 后 ， 将 来 还 不 一 定 是 什么 情况 ， 束 只 能 便 痢 头皮 解决 了。 


Org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 
"configServerRetrylInterceptor" avallable 

at org.springframework.beans.factory.support.DefaultListableBeanFactory. 
JetBeanDefijinition (DefaultListableBeanFactory.Java:b685) 
~[spring—beans—3.0.8.RELEASE.Jar:3.0.8.RELEASEI 

at org.springframework.beans.factory.support.AbstractBeanFactory. 
JetMergedLocalBeanDefijinition(AbstractBeanFactory.Java:1210) 
~[spring—beans—5.0.8.RELEASE.Jar:o9.0.8.RELEASEI] 

at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean 
(AbstractBeanFactory. ava:291) ~[spring—beans-5.0.8.RELEASE.Jar:5.0.8.RELEASEI] 

at org.springframework.beans.factory.support.AbstractBeanFactory.getBean 
(AbstractBeanFactory. ava:204) ~[spring—beans-5.0.8.RELEASE.Jar:5.0.8.RELEASEI] 

at org.springframework.retry.annotation. 
AnnotatijonAwareRetryOperationsinterceptor.getDelegate (AnnotationAwareRetryOper 
ationsIinterceptor.Java:180} ~|spring—retry— 1 .2.272.RELEASE. JAar:nal 

at org.springframework.retry.annotation. 
AnnotatijonAwareRetryOoperationsinterceptor.invoke (AnnotationAwareRetryOperation 


snterceptor. Java:l11l) ~|[spring—retry— i122.2.RELEASE. Jar:nal 


然后 跟踪 代码 ， 发 现在 图 19-22 中 的 位 置 找 不 到 相应 的 Bean 了 ， 答 案 也 就 比较 明显 了 : 
要 么 是 程序 有 BUG (不 过 可 能 性 不 大 ) ， 要 么 就 是 缺 包 了 ， 在 缺失 的 包 里 有 这 个 Bean。 但 是 
这 个 Bean 在 哪个 包 里 呢 ? 网 上 没有 详细 资料 ， 在 网 上 对 比 了 一 下 消息 总 线 的 配置 ， 依 赖 也 没 
有 少 加 什么 ， 如 图 19-22 所 示 。 
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public class ConfigServerInstanceProvider { 


private static Log Logger = LogFactory.getLog(ConfigServerInstanceProvider.class); 
private final DiscoveryClient client; 


public ConfigServerInstanceProvider(DiscoveryClient client) { 


this.client = client; 找 不 到 对 应 的 Bean 


i List<serviceinstance> Fee Conf 1: EM (String serviceId) { 
Logger.debug("Locating configserver (" + serviceld + ") via discovery"); 
List<ServiceInstance> instances = this.client. nn et eerie ny 
if (instances.isEmpty()) { 

throw new IllegalstateException( 
"No instances found of configserver (" + ServiceId + ")"); 


Logger.debug("Located configserver (" + serviceId 
+ ") via discovery. No of instances found: 
return instances; 


谭 


+ instances.size()); 
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(3) 在 刷新 的 时 候 缺 少 一 个 拦截 器 ， 可 以 目 己 设置 一 个 。 加 一 个 配置 类 ， 并 在 resources 
下 新 建 META-INF 目录 和 一 个 spring.factories 文件 ， 如 图 19-23 所 示 。 


v 中 > mango-consumer [mango dev] 
Y 二 > src/main/java 
v 看 > com,louis.,mango.consumer 
> 1 用 MangoConsumerApplication,java 


》 [2 RetrrConfiguration,java 


> 而 > com.|ouls.mango.consumer.conmtroller 


vv 国 > src/main/resources 
E> META-INF 
和 


bannerbtd 
台 bootstrap.yml 
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RetryConfiguration.java 


Public class RetryConfigquration { 


QBean 
QConditionalOnMissingBean (name = "configSsServerRetrylInterceptor™") 
public RetryOperationslInterceptor configServerRetrylInterceptor(} I 
return RetryInterceptorRuilder.stateless(}) .backoffOoOptions (1000, 1.2, 
J000) .maxAttempts (10) .build()}); 
} 


spring.factorles 


Org.Sspringframework.cloud.bootstrap.BootstrapConfijguration=com.1loulis.mango.con 


Sumer .RetryConfiguration 
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指定 新 建 的 拦截 器 ， 这 样 系统 初始 化 时 就 会 加 载 这 个 Bean。 人 然后 重新 局 动 ， 束 没有 报错 
了 。 下 面 看 看 能 不 能 使 用 。 
(4) 访问 http://localhost:8005/hello， 效 果 如 图 19-24 所 示 。 
G © localhost:8005/hello 


hello, dev configurations 5. 


图 19-24 
(5) 修改 仓库 配置 文件 ， 把 数字 5 改 成 153， 修改 完成 提交 ， 如 图 19-25 所 示 。 
El consumer-dev.properties 35 Bytes 
弗 用 已 福士 ( Louis 上) 提交 于 刚刚 . 更 新 consumer-dev.properties 


hello=hello，dew configurations 15. 


图 19-25 
再 次 访问 发 现 还 是 旧 人 信息， 如 图 19-26 所 示 。 


GG © localhost8005/hello 


hello, dev configurations 5. 
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(6) 用 工具 发 送 post 请 求 http://localhost:8020/actuator/bus-refresh。 
这 次 是 向 注册 中 心服 务 端 发 送 请 求 ,发 送 成 功 之 后 服务 端 会 通过 消息 总 线 通 知 所 有 


的 客户 端 进行 刷新 。 另 外 ， 开 居 消 息 总 线 后 的 请 求 地 址 是 /actuator/bus-refresh， 不 


注 意 
于 再 是 refresh 了 ， 如 图 19-27 所 示 。 


POST ~ | httpy/localhost:802U/actuatorbus-refresh 
Request 


Body Header Content-Ty¥pe = 


Content-Type: application/json 


Response 


Body Header a04 nocontent 


图 19-27 
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(7) 给 服务 新 上 友 送 刷新 请 求 之 后 ， 再 次 访问 http://localhost:8005/hello， 结 果 如 图 19-28 
所 示 〈 可 能 需要 一 点 刷新 时 间 ) 。 


和 一 > CGC © localhost8005/hello 


hello, dev configurations 15. 
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最 终 ， 我 们 居 快 地 肥 现 客 己 站 已 经 能 够 通过 消 轧 总 线 获 取 最 新 配置 了 。 
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sP 二 局 


Bilium 夭 霓 篇 


本 篇 内 容 为 前 端 实现 篇 ， 全 面 细致 地 讲解 Mango 权限 管理 系统 的 前 端 实现 全 过 程 。 从 
坟 开 始 ， 逐步 扩 展 ， 逐渐 完 善 ， 手把手 地 教 你 如 何 利 用 Vue.js 和 Element 构建 功能 丰富 、 
风格 优雅 的 权限 管理 系统 .。 


第 20 章 搭建 开发 环境 ， 
第 21 章 前 端 项 目 案例 ， 
第 22 草 工具 模块 封 濠 ， 
第 23 章 第 三 方 图 标 库 ， 
第 24 章 多 语言 国际 化 ， 
第 25 章 登录 流程 完善 ， 
第 26 草 管理 应 用 状态 ， 
第 27 章 头 部 功能 组 件 ， 
第 28 章 动态 加 载 菜单 ， 
, 讲解 页 面 和 按钮 权限 控制 的 实现 思路 和 方案 。 
第 30 章 功能 管理 模块 ， 
; 讲解 使 用 IFrame 许 套 外 部 网 页 的 实现 思路 和 方案 。 
, 讲解 数据 备份 还 原 前 端 界 面相 关 的 实现 方案 。 


第 29 章 页 面 权限 控制 


第 31 章 坐 套 外 部 网 页 
第 32 草 数据 备份 还 原 


寺 整 地 痢 述 和 示范 前 端 开发 环境 的 搭建 和 安装 。 
讲解 基于 Vue + Element 实现 的 第 一 个 案例 。 
对 革 用 的 ,axios 和 Mock 模块 进行 集中 封 委 。 
介绍 第 三 方 图 标 库 Font Awesome 的 使 用 方法 。 
讲解 如 何 通 过 Vue 组 件 实现 多 语言 国际 化 。 

丰 师 登录 功能 ,美化 登录 界面 , 优化 登录 逻辑 。 
讲解 如 何 使 用 vuex 进行 组 件 则 状态 的 共 圣 。 
实现 和 优化 主题 切换 、 语言 切换 等 功能 组 件 。 
讲解 如 何 通过 导航 守卫 动态 加 载 导 航 某 单 树 。 


抽取 部 分 案例 讲解 常规 业务 功能 模块 页 面 的 实现 。 


第 20 章 
抬 建 开 友 环境 


技术 基础 


前 并 项 目 将 会 使 用 到 以 下 几 项 主要 技术 和 框 淋 , 右 有 必要 ,请 和 完了 解 相关 知识 ,也 可 一 边 
跟 进 项 目 一 按 补 充 学 习 ， 请 读者 目 行医 酌 。 


Vue.js 官网 : https://cn.vuejs.org/ 


e Vue.js 教程 : http://www.runoob.com/vue2/vue-tutorial.html 
e Vue-router 教程 : https://router.vuejs.org/zh/ 

e Vuex 教程 : https://vuex.vuejs.org/zh/euide/ 

e Flement 教程 : http://element-cn.eleme.1i0/#/zh-CN 


开发 环境 


20.2.1 Visual Studlo Code 


Visual Studio Code 是 一 款 非 常 优秀 的 开源 编辑 器 ， 非 常 适 合作 为 前 端 IDE， 根 据 自 己 的 
系统 下 载 相应 的 版 本 进行 安 效 ， 如 图 20-1 所 示 。 


e 下载 地 址 : https://code.visualstudio.cony 
更 多 VS Code 教程 可 以 参考 以 下 资料 : 


e 官网 文档 : https://code.visualstudio.com/docs 
。 简 书 教程 : https:/www-.jianshu.com/p/990b19834896 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 


Sele lAellilled 
Redefined. 


Downlosd for Windows 


macOs Packsge 
Windows x6d Lier Inasaler 


Linux xéd 性 bb 
"Fam 


Other downloads 


图 20-1 


20.2.2 Node Js 


: 手把手 教 你 开发 权限 管理 系统 


Node JS 提供 的 NPM 依赖 管理 和 编译 打包 工具 使 用 起 来 非常 方便 ， 对 于 前 端 比较 大 型 一 
些 的 项 目 还 是 采用 NPM 作为 打包 工具 比较 理想 。 要 使 用 NPM， 就 需要 安装 NodeJS， 下 载 地 


址 为 http://nodejs.cn/download/。 


选择 系统 对 应 的 版 本 ， 这 里 我 们 下 载 Windows 系统 的 64 位 zp 文件 
node-v10.15.0-win-x64.zip。 下 载 完 成 后 解压 ， 可 以 看 到 里 面 有 一 个 node.exe 的 可 执行 文件 ， 如 


图 20-2 所 示 。 


把 Node 添加 到 系统 环境 变量 里 面 ， 打 开 cmd 命令 行 ， 输 入 npm -v， 如 果 出 现 如 图 20-3 


所 示 的 据 示 信息 ， 台 说 明 忆 经 安装 正确 。 
园 etc 


| ， node modules 

| | CHANGELOG.md 

| | LICENSE 

i node 

| | node etw providerman 

国 node perfctr provider.man 
[S| nodevars 

| | npm 

舍 | npm 

| | README.md 


20-2 


机 Command Prompt 


20-3 


如 果 你 安装 的 是 旧版 本 的 npm， 可 以 很 容易 地 通过 npm 命令 来 升级 。 


# linux 系统 命令 
Sudo npm install npm -0g 
# windows 系统 命令 


npm install npm -gq 


202 


如 图 20-4 所 示 ，npm 从 6.4.1 版 本 升级 到 了 6.5.0 版 本 。 


图 20-4 


更 多 NodeJS 教程 可 以 参考 以 下 资料 : 


e 中 文官 网 ; http://nodejs.cn/api/ 
e 菜 乌 学 堂 : https://Wwww.runoob.com/nodejs/node]s-tutorial.html 
20.2.3 安装 webpack 


安装 好 npm 之 后 ， 就 可 以 通过 npm 命令 来 下 载 各 种 工具 了 。 安 装 打包 工具 webpack，-8 
表示 全 局 安装 ， 代 码 如 下 : 


npm install webpack -ga 


更 多 webpack 教程 可 以 参考 以 下 资料 : 


e 琳 乌 学 特 : http://www.runoob.com/w3cnote/webpack-tutorial.html 


20.2.4 安 闭 Vue-cli 
安装 vue 脚手架 项 目 初始 化 工具 vue-cli，-g 表示 全 局 安装 ， 代 码 如 下 : 


npm install vue-cli -9g 


20.2.5 ”淘宝 镜像 


因为 NPM 使 用 的 是 国外 中 央 仓库 ， 有 了 时候 下载 速 度 比 较 “ 吕 人 ”， 束 像 Maven 有 国内 镜 
像 一 梓 ，NPM 在 国内 也 有 和 镜像 可 用 。 这 里 建议 使 用 淘 宇 锐 像 。 
安装 淘宝 镜像 ， 安 装 成 功 后 用 cnpm 蔡 代 npm 命令 即 可 ， 如 cnpm install webpack -g 。 


npm install -9g cnpm ——-registry=https://registry.npm.taobao.org 
rm 阅 士 
20.2.6 安 半 Yarn 


Yarm 是 Facebook 发 布 的 node.js 包 管 理 占 , 比 npm 更 快 、 更 局 效 , 可 以 使 用 Yam 蔡 代 npm。 
安装 了 Node， 同 时 也 就 安装 了 NPM， 可 以 使 用 下 面 的 命令 来 安装 : 


npm 1 yarn -9g verbose 
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NPM 官方 产 访问 速度 实在 不 敢 茶 维 ， 建议 使 用 之 前 切换 为 淘 宇 镜像 , 在 Yam 安 沪 完毕 之 
后 执行 如 下 指令 : 


Yarn config set registry https://registry.npm.taobao.org 


到 此 为 止 ， 我们 就 可 以 在 项 目 中 像 使 用 NPM 一 样 使 用 Yam 了 。 使 用 Yam 跟 NPM 差 
别 不 大 ， 具 体 命 令 天 系 如 下 : 


npm install => Yarn install 

npm install -save [package| => Yarn add [package | 

npm install -~--save-dev [package|] => Yarn add [packagel|] --dev 
npm install -~--global [package| => yarn global add [packagel 
npm uninstall -~--save [package| => yarn remove [Packadge | 


npm uninstall -save-dev [package| => varn remove [package | 


创建 项 目 


20.3.1 生成 项 目 
环境 已 经 搭建 完成 ， 现 在 我 们 通过 vue-cli 来 生成 一 个 项 目 ， 名 称 为 mango-ui。 
vue init webpack mango—uli 


一 路 根据 提示 输入 项 目 信 息 ， 等 竺 项 目 生 成 ， 如 图 20-5 所 示 。 
命令 执行 完毕 ， 生 成 的 项 目 结构 如 图 20-6 所 示 。 


$$ vue 1Mt webpack mango—un 


Project name (mango-u7) 

Project name mango-un 

Project description (A Vue.Js project) mango un 

Project description mango ui 

Author lou1s 

Author lou'1s 

Vue build (Use arrow keys) 

Vue build standalone 

Install vue-router? (Y/n) Yy 

Install vue-router? Yes 

Use ESLint to 11nt your code? (Y/n) nm 

I 和 

Set up unit tests (Y/n) n 

Set up unit tests No 

Setup e2e tests with Nightwatch? (Y/n) nm 

Setup e2e tests with Nightwatch? No 

should we run npm 1install’ for you after the project has been created? (recom 
7 Should we run nom iinstall’ for you after the project has been created? (recom 
mended) no 


" 
} 
村 
3 
# 
-yy 
F 
sh 
让 
时 
1 
" 
i 
WE 
有 
| 
FE 
村 
"3 
有 
FE 

n 
叶 
= 
-ph 
有 
村 
于 
本 
1 
本 
有 
“和 
F 


vuUe-cCl1 . Generated "mango-u1 . 


# Project 1nitialization finished! 


图 20-5 
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dam Date modified Type 


build 171572019 16:01 File folder 

局 config S2019 160 File folder 

国 sre 12019 16:0" File folder 

而 | 惑 atie A32019 16:0 Pile folder 
| :babelrc 1 2019 160 BABELRG File 

| | .editorconfig /1572019 16:0 EDITORCONEFIG File 
| .gitignore /S2019 16:0" Tedt Document 

[ 冉 | .pestcssrcjs 1/15/2019 16:01 JavaScript File 

OAV indexchtml 1/15/2019 16:0 QQBrowser HTML... 

Package,json N2019 T1600" SON File 

WA README.md 1/15/2019 16:01 MD File 


20.3.2 ”安装 依赖 


进入 项 目 根 目录 ， 执 行 ”yarn install (也 可 以 用 npm install 或 淘宝 cnpm install， 我 们 这 里 
用 Yarmn 会 快 一 点 ) 安装 依赖 包 。 


cd mango—ui 


yarn install 


安装 成 功 之 后 如 图 20-7 所 示 。 


-Tm 

yarn install vi.9.4 

| No lockfT1 le found. 

Validating package. J]S0n. .. 

Resolving packages. .. 

arning autoprefixer > i BFOwsers]11s 七 2 COou]1d 后 a11 FI F 忆 二 d 阐 避 BFOWSEFS1TS{ 

3.0 config used in other tools. 

a 而 遇 可 攻 革 尼 且 号 而 天 门面 亲 昌 册 臣 看 厅 普 丰 二 下 其 导 六 本 六 剖 情 号 革 三 号 | 号 七 全 .7 了 7。 7 四 普 CSersl15S 七 2 could 十 到 11 Cn 
E 


iy 


一 


ee 


reading Browserslist »3.0 confg used 1n other tools. 
warning Css-loader > cssnano > postcss-merge-rules > browse 
ail on reading Browserslist >3.0 config used in other too]ls. 
warning Css-loader » cssnano » postcss-merge-rules » caniuse-ap1 >» browsers 
1l1st 2 could fa1il on ading Browserslist >3.0 conf1ig used 1n other tools. 


warning webpack-bundle-analyzer » bf-node4a@5.3.1: Switch to the bf package for fixes and ne 


四 = 


本 


platform  w1n32 1s 1ncompatible with 七 hs module. 
"sevents@1l.2.4” 15 an optional dependency and failed compat1Tb111tw check。 Excluding 71t fr 
1nstallation. 
Linking dependencies. .. 
Building fresh pack 
ss Saved lockf1le. 
1n 141.59s, 


图 20-7 


等 依赖 包 和 安装 完成 之 后 ,会 在 项 目 根 目录 下 生成 node modules 文件 夹 ， 这 个 目录 束 是 下 
载 的 依赖 包 的 统一 存放 目录 ， 如 图 20-8 所 示 。 


115/2019 16:01 File folder 
1715/2019 16:01 File folder 
1/15/2019 16:07 Mle folder 


171372019 16:01 File folder 


static 1/15/2019 16:01 File folder 


| | ,babelrc 1/15/2019 16:01 BABELRC File 
| | .editorconfig 1/15/2019 16:01 EDITORCONFIG File 


本 gtignore a019 1601 Tedt Docurment 


20-8 
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20.3.3 ”启动 运行 
安装 完成 之 后 ， 执行 应 用 局 动 命 令 ， 运行 项 目 : 


npm run dev 


执行 命令 之 后 ， 如 : 
20-9 所 示 。 


SE “I Your application is runing here ....”,， 


$$ npm run 日 ev 


> mango-u1@i1.0.0 gev C:\dev\git\mango-u1\src\mango-un 
> Webpack-dev-server --1nline --progress --confg builld/webpack. dev. conf.]s 
95% emtting DONE Compiled successftully 1n 20816msi6:09:35 


I Your application 1s5s running here: http: /localhost:8080 


20-9 


浏 斋 弗 访 问 对 应 地 址 ， 如 图 20-10 所 示 ， 这 里 是 http://localhost:8080， 会 出 现 Vue 的 介 
绍 页 面 。 


心 加 localhost:8080/#/ 


Welcome to Your Vue.js App 


Essential Links 


Core Docs Forum Community Chat Twitter 
Docs for This Template 


图 20-10 


到 此 ， 我 们 的 项 目 脚 手 架 就 建立 起 来 了 。 
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21 章 
有 粳 巩 目 某 全 


号 入 项 目 


打开 Visual Studio Code, 选择 File 一 add Folder to Workspace， 导 入 我 们 的 项 目 , 如 图 21-1 
所 示 。 


|| mainys - Unttled MWorkspace) - Visual tudio Code 
File Edit Selection Miew ‘Qo Debug Tasks Help 
EXPLORER 
1 OPEN EDITORS 
所 5 FE 
a UNTITLED WORKSPACE) 


a mango-ul 


import Wue from vue 
import Bpp trom /App 
import router trom './router 


WUE ,CDnfrig .ProductionTiIp = 


({ 
El]: 
outer, 
components: 4{ Ap 
template: "App/> 


ls main.js | 5s 有 
kk 可 yr 


PROBLEMS CUTRUT 覃 日 ESLint 


“eslint.packapgeManager": Yarn 


Alternatively you can disable ESLint for the workspace folder mango-ui by 
executing the ‘Disable ESLint’” command. 


UTF8 LF JovaScript 四 不 1 


人 ，ouruE 
和 maste* 个 图 0 生 昌 Ln 1 Col1 Spaces2 
PP 


图 21-1 


女装 Element 


21.2.1 安装 依赖 
Element 是 国内 狐 了 么 公司 提供 的 一 套 开 源 前 端 框 架 ， 简 洁 优雅 ， 提 供 了 Vue、React、 
Angular 等 多 个 版 本 ， 这 里 使 用 Vue 版 本 来 搭建 我 们 的 界面 。 


一 -| 中 让 


| 


Fi 
EE 中 一 


=, if if 1 


[ 包 ELement 


各 全 


安装 


更 新 日 志 


Element React 


npm 安 乱 


推荐 人 入 用 npm 的 方式 守 革 ， 它 能 更 好 地 和 webpack 打包 工 县 配 言 使 用 . 


Element Angular 


npm i element-yi -5S 


CDN 


内 坷 过 种 动 回 


<-- 引 和 样式 --> 


“link rel=-"stylesheet" hret=-"https:/ unpke. conmn/element-u1/lib/theme-chalk/index SS >》 


<!-- 引入 组 件 库 --> 


<stript srec="https:/ /unpke. comrelLement-ui/lib/index.js"»*/scripts 


图 21-2 


varn add element—u1 

rn add v1.9.4 

fo No lockft1 le tound. 

/4] ResolvTng packages... 
Fetching packages. .. 
/4] Linking dependencies... 


= 
一 
和 
a 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


访问 地 址 http://element-cn.eleme.i0/#/zh-CN/component/installation, 会 看 官方 指南 ,包含 框 
染 的 安 沪 、 组 件 的 使 用 等 全 方位 的 教程 ， 如 图 21-2 所 示 。 


自 定 沁 主 是 目前 可 LW 通过 unpkg.comelement-yl 获取 汉 慰 新 版 相 的 次 晨 ， 址 南面 上 引信 上 和 css 豆 件 即 可 开始 使 用 . 


按照 安装 指南 ， 我 们 选择 NPM 的 安装 方式 。 因 为 我 们 安装 了 Yarm， 所 以 可 以 直接 使 用 
yarn add element-ui 命令 蔡 代 ， 如 图 21-3 所 示 。 


Fn1n 昌 > element-u1@2.4.11 has Unmet peer dependency  VUuUeaAnA2.5.a .。 


4/4|] Building fresh packages... 
success Saved lockf1 |e. 

suUCCess Saved 10 new dependencles. 
info Direct dependenci1es 


lement-y1@2.4.11 


info 上 11 dependencies 


async-validator@l. 8.5 
babel-helper-vue-J]sx-merge-props@2.0.3 
babe|l-runti1mee@6.26.0 

core-]s@2.6.2 

中 eepmergeal.5.2 

E]emen 七 -U1 生 2.4.1| 
normalize-wheel@l1.0.1 
regenmerator-runt1Tmeea0.11.1 
res1ze-oObserver-polyf111G@l.5.1 

十 hrott = es 


一 一 一 = a Ls = 
de 


图 21-3 


21.2.2 ”导入 项 目 
按照 安装 指南 ， 在 main.js 中 引入 Element。 引 入 之 后 ， 


main.js 内 容 如 图 21-4 所 示 。 


第 21 章 ”前端 项 目 案例 


main.)s 三 

] import Vue trom 

2 import App from 
import router from 


import ElementUI from 


import "elemeni 
Vue.config.productionTip = 
Vue .use(ElementUI) 

({ 

el1: “大 ap 


| 十 ir 
router, 


render: h h(App) 


图 21-4 


引入 项 目 之 后 ， 在 原 有 的 HelloWorld.vue 页 和 面 中 加 入 一 个 Element 的 按钮 ， 测 试 一 下 。 
在 Element 官网 组 件 教 程 案例 中 ， 包 伟大 量 组 件 使 用 场景 ， 直 接 复 制 组 件 代 码 到 项 目 页 面 即 
可 ， 如 图 21-5 所 示 。 


b OPEN EDITORS 1UNSAVED 
a UNTITLED (WORKSPACE) 
Essential Links 


b build 


type=*primary"> 主 要 按钮 


Core Docs 


图 21-5 


加 图 21-6 所 示 ， 说 明 Element 组 件 已 经 成 功 引 入 J。 


Welcome to Your Vue.s App 


Essential Links 


主要 按钮 Core Docs Forum Community Chat Twitter 


Docs for This Template 


图 21-6 
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21.3.1 六 加 页 面 


我 们 把 components 改名 为 views, 并 在 views 目录 下 添加 3 个 页 面 : Login.vue、Home.vue、 
404.vue。3 个 页 面 内 容 简单 相似 , 只 有 简单 的 页 面 标识 , 如 登录 页 面 是 "Login Page”。Login.vue 
代码 如 下 ， 其 他 页 面 关 似 。 


<template> 
<div Class—" page > 
<h2>Login Page</h2> 
</div> 


</template> 


<ScCript> 

export default I 
name: "Login' 

} 


< script»> 


21.3.2 ”配置 路 由 
打开 routerindex.js， 添 加 3 个 路 由 ， 分 别 对 应 主页 、 登 录 和 404 页 面 。 


import Vue from ‘vue'" 

import Router from ‘vue—router' 
import Login from ‘'@/views/Login' 
import Home from ‘8@/views/Home' 


import NotFound from ‘'@/views/404" 
Vue.use (Router) 


export default new RouteI({ 
routes: | 

{ 
Ba 
name: "Home', 
component: Home 

}, 1 
path: '/login', 
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name: LogG1Im ， 

component: Login 
| 

path: /404°", 

name: notEound 

component: NotFound 


} 


在 浏览 器 中 重新 访问 下 面 几 个 不 同 的 路 径 ， 路 由 规 会 根据 路 径路 由 到 相应 的 页 面 。 
e http://localhost:8080/#/，/ 路 由 到 Home Page， 如 图 21-7 所 示 。 


< GG ©@ localhost:8080/#/ 


Home Page 
图 21-7 
e http://localhost:8080/#/logimm，/login 路 由 到 Login Page， 如 图 21-8 所 示 。 


所 CG 加 localhost:8080/#/login 


Login Page 
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e http://localhost:8080/#/404，/404 路 由 到 404 Page， 如 图 21-9 所 示 。 
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te > GG OD localhost8080/#/404 


404 Page 


21-9 


2 1 .A， 安装 scss 


21.4.1 安装 依赖 
因为 后 续 会 用 到 SCSS 编写 页 面 样式 ， 所 以 先 安装 好 SCSS。 


Yarn add sass-Loader noaqde-sass ~—dev 


21.4.2 ;并 加 配置 
在 build 文件 严 下 的 Webpack.base.conf.1s 的 rules 标签 下 添加 配置 。 


Ee 
Ma rs skEwlie se sqsso ll 


} 


21.4.3 ”如 何 使 用 
在 页 面 代 码 style 标签 中 把 lang 设置 成 scss 即 可 。 
<style amng= SCSS > 


</style> 


21.4.4 页 面 测试 
丰富 一 下 404 页 面 内 容 ， 加 入 scss 样式 ， 如 图 21-10 所 示 。 页 面 样式 代码 太 多 ， 不 方便 
贴 ， 详 见 代码 。 
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EXPLORER ENE Login.vue Home.vue 404wvue Xx 
bp OPEN EDITORS 1UNSAVED I Bclick="$router .go(-1)"> 返 回 上 一 页 , 
于 , 硬 一 门 ri Fr 1 门 下 门 Fr 


a WNTITLED (WORKSPACE) type= primary” class 


b build 
# _config 


hb noge mogules 


色 21-10 


访问 http://localhost:8080/#/404, 正确 显示 修改 后 的 404 页 和 面 效 果 ， 如 图 21-11 所 示 。 


< 和 DD localhost:8080/#/A04 


404 


抱 半 ! 您 访问 的 页 面 失 联 啦 .… 


返回 上 一 下 


ey 


sk 安宁 axios 


axios 是 一 个 基于 Promise 用 于 浏 贤 器 和 Node.js 的 HTTP 客户 问 , 我 们 后 续 需 要 用 来 发 送 
HTTP 请 求 ， 接 下 讲解 axios 的 安装 和 使 用 。 


21.5.1 安装 依赖 
执行 以 下 命令 ， 安 六 axios 依赖 。 
Yarn add axios 
21.5.2 ”编写 代码 
安装 完成 后 ， 修 改 Home.vue， 进 行 简单 的 安装 测试 。 
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<template> 
<div class="page"> 
<h2>Home Page</h2> 
<el-button type="primary™ Qclick="testAxios()" > 测试 Axios 调用 </el-button> 
</div> 


</template> 


<ScCript>» 
import axios from ‘axilos" 
export default I 
name: "Home', 
methods: { 
testAxioSs()} I 
axios.get ('http://localhost:8080') .then(res => { alert (res.data) }) 


} 


</script> 


21.5.3 页面 测试 


打开 主页 ， 单 击 测试 按钮 触发 HTTP 请 求 ， 并 弹出 窗 显示 返回 页 面 的 HTML 数据 ， 如 图 
21-12 所 示 。 


localhost:8080/#/ 


localhost:8080 显示 


<IDOCTYPE htmls 
Home Page <htmls 
<head> 

<mMmeta charset="utf-8"» 


<meta name="viewport” content="width=dewnce-width,mitial- 
scale=1,0"> 
<title>mango-ul</trntle> 
</head> 
<body> 


= er Pr 
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2 I .6 安装 Mock.js 


为 了 模拟 后 台 接 口 所 供 页 面 斋 要 的 数据 ， 引 入 Mockjjs 为 我 们 提供 模拟 数据 ， 而 不 用 依赖 
于 后 台 接 口 的 完成 。 
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21.6.1 安装 依赖 
执行 如 下 命令 ， 安 装 依赖 包 。 


yarn add mock]s ~—dev 


21.6.2 ”编写 代码 


安装 完成 之 后 ， 我 们 写 个 例子 测试 一 下 。 
在 sre 目录 下 新 建 一 个 mock 目录 ， 创 建 mockjs， 在 里 面 模拟 两 个 接口 ， 分 别 拦截 用 户 
和 菜单 的 请 求 ， 并 返回 相应 的 数据 。 


import Mock from ‘mockj]s”' 

Mock.mock ('http://localhost:8080/user', 
'name': 'Q@name'，// 随机 生成 姓名 
mame': 'Q@email'，// 随机 生成 邮箱 
'age11-10': 5，// 年 龄 在 1~10 岁 之 间 

}) 

Mock.mock('http://localhost:8080/menu', f{ 
"id '@increment"，// id 自 增 
'name': 'menu'， // 和 名称 为 menu 
"order11-20': 5，// 排序 在 1~20 之 间 

}) 


修改 Home vue， 在 页 面 添加 两 个 按钮 ， 分 别 触发 用 户 和 菜单 的 处 理 请 求 ， 成 功 后 弹出 获 


注意 需要 在 页 面 通过 import mock from '@Amock/mock.js' 语句 引入 mock 模块 。 


<template> 
<div CasSSs= age > 
<h2>Home Page</h2> 
<el—button type="primary™" Qclick="testAxios{()" > 测试 Axios 调用 </el-button> 
<el-button type="primary™" Qclick="getUser()" > 获取 用 户 信 息 </el-pbutton> 
<el-button type="primary™" Qclick="getMenu{) "> 获取 菜单 信息 </el-putton> 
< /div 


</template> 


<ScCript> 
import axios from ‘axilos" 
import mock from /mock/mock.]js" 
export default I 
name: "Home', 
methods: 1 
testAxios() I 


Pd 
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axios.get (http://localhost:8080°) .then(res => { alercres.aatah 1) 


} 
getUser() 1 
axios.get (http://localhost:8080/user') .then{(res => 
{ alert (JSON.stringify(res.data)})} }) 


} ， 
getMenul() 1 
axios.get('http://localhost:8080/menu') .then {res 三 > 
{ alert (JSON.stringify(res.data))} |}) 


} 


} 


</script> 


21.6.3 ”页面 测试 
在 浏览 左 中 访问 http://localhost:8080/#/， 分 别 单 击 两 个 按钮 ，mock 会 根据 请 求 url 拦截 
对 应 请 求 并 返回 模拟 数据 。 


e 获取 用 户 信 息 ， 如 图 21-13 所 示 。 


localhost8080 显示 


(name" :tbc usvucas. “age"3) 


获取 荣 单 信息 


。 获取 末日 信息 ， 如 图 21-14 所 示 。 


localhost.8080 显示 


fid":3."name™"menu"."order":13} 


21-14 


测 斌 成功， 这样 mock 就 成 功 集 成 进来 了 。 
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封装 axios 模块 


22.1.1 封装 背景 


使 用 axios 及 起 一 个 请 求 是 比较 简单 的 事情 ， 但 是 axios 没有 进行 封装 复 用 ， 项 目 越 来 越 
大 ， 会 引起 越 来 越 多 的 代码 元 余 ， 让 代码 变 得 越 来 越 难 维护 ， 所 以 我 们 在 这 里 先 对 axios 进 
行 二 侈 封装 ， 使 项 目 中 各 个 组 件 能 够 复 用 请 求 ， 让 代 人 码 变 得 更 容易 维护 。 


22.1.2 ” 封 滩 妻 操 


e 统一 url 配 四 。 

e 统一 api 请 求 。 

e request (请 求 ) 拦截 器 。 例如; 带 上 token 和 等， 设置 请 求 头 。 

e@ Iesponse (响应 ) 拦截 器 。 例如: 统一 错误 处 理 ， 页 面 重 定向 等 。 
e 根据 需要 ， 结 合 vuex 做 全 局 的 loading 动画 ， 或 者 错误 处 理 。 

e 将 axios 封装 成 Vue 插件 使 用 。 


22.1.3 ”文件 结构 
在 src 目录 下 ， 新 建 一 个 http 文件 来 ， 用 来 存放 http 交互 api 代码 。 文 件 结构 如 下 : 


e config.js: axios 默认 配置 ， 包 含 基础 路 径 等 信息 。 
e@ axios.js; 二 次 封装 axios 模块 ， 包 含 拦截 器 等 信息 。 
。 apijs : 请 求 接口 汇总 模块 ， 聚 合 所 有 模块 APL 
e index.js: 将 axios 封装 成 插件 ， 按 插件 方式 引入 。 
e modules: 用 户 管 理 、 菜 单 管 理 等 子 模 块 API.。 


http 模块 目录 文件 结构 图 如 图 22-1 所 示 。 
子 模块 Modules 目录 文件 结构 图 如 图 22-2 所 示 。 
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4 modules 


图 22-1 图 22-2 


22.1.4 代码 说明 
1. conflg.JSs 


AXIOS 相关 配置 ， 每 个 配置 项 都 有 市 说 明 ， 详 见 注释 。 


import { baseUrl } from ‘8@/utils/global' 


export default I 
method: “get ， 
// 基础 url 前 绥 
baseUrl: baseUTrl， 
// 请 求 头 信息 
headers: 1{ 

‘Content—Type': 'application/json;charset=UTF—8" 

} ， 
// 参数 
data: {lr 
// 设置 超时 时 间 
timeout: 1]0000, 
// 携带 凭证 
withcCredentials: true, 
// 返回 数据 类 型 


responseType: 'JSson' 


2. axXlIOS.|S 
axios 拦截 器 ， 可 以 进行 请 求 拦截 和 响应 拦截 ， 在 发 送 请 求 和 响应 请 求 时 执行 一 些 操作 。 


(1) 这 里 导入 类 配置 文件 的 信息 (如 baseURL、headers、 withCredentials 等 设置 ) 到 axios 
对 象 


218 


第 22 章 工具 模块 封装 


(2) 发 送 请 求 的 时 候 获取 token， 如 果 token 不 存在 ， 说 明 未 登录 ， 就 重 定向 到 系统 登录 
界面 ， 否 则 携带 token 继续 发 送 请 求 。 

(3) 如果 有 需要 ， 可 以 在 这 里 通过 response 啊 应 拦 稚 嚣 对 返回 结果 进行 统一 处 理 后 再 
返回 。 


import axios from ‘axlos'? 
impor confidqg from ". /Configq"s 
i1mport Cookies from "SCookie™s 


import router from '‘'@/router"' 


export default function Saxios (options) { 
return new Promisel(l(resolve, reject) => 1 
const instance = axlilos.create (1{ 
baseURL: config.baseUrl, 
headers: Configqg.-.headersr, 
timeout: config.tijmeout, 
withCredentials: config.withCredentjials 
1 
// request 请 求 拦 截 器 
1Instance .IntercCceptors .TeGuest -UsSe ( 
config => | 
let token = Cookies.get('token") 
if (token) { // 发 送 请 求 时 携带 token 
config.headers.token = token 
} else { // 了 重 定 同 到 登录 页 面 
router.push("'/login') 
} 
return config 
}, 
error 一 > | 


return Promise.reject (error) 


// response 啊 应 拦截 器 
instance.intercepLors. Tresponse.uUsel 
TESPOnNnse = 三 > | 
return response.data 
} ， 
err 一 > { 


return Promise.reject (err) 
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// 请 求 处 理 

instance (options} .then{(res => { 
resolve (res) 
return false 

J -eateh(error — > | 
Ielect (error) 

全 

1 


3. INdex.js 


这 里 把 axios 注册 为 Vue 插件 使 用 ， 并 将 api 模块 挂 载 在 Vue 原型 的 $api 对 象 上 。 这 样 
在 能 获取 this 引用 的 地 方 就 可 以 通过 “this.$api. 子 模块 .方法 ”的 方式 调用 API 了 。 


import api from './api' // 导入 所 有 接口 


const install = Vue => | 

if (install.installed) 
returns 

install.installed = 七 ZU: 

Object.defineProperties (Vue .prototype, (| 
// 注意 ， 此 处 挂 载 在 Vue 原型 的 $api 对 象 上 
api: { 

Ge i 


return api 


}) 
} 


export default install 
4. apljs 
此 模块 是 一 个 聚合 模块 ， 汇 合 modules 目录 下 的 所 有 子 模块 API。 
// 接口 统一 集成 模块 


import * as login from './modules/login' 
import * as user from './modules/user' 


import * as dept from './modules/dept'" 


import * as role from './modules/role!" 
import * as menu from ‘'./modules/menu' 
import * as dict from './modules/dict" 


import * as config from './modules/config" 
import * as log from './modules/log' 


import * as loginlog from './modules/loginlog' 
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// 默认 全 部 导出 
export default I 


Jogin, User;: depty role, menu, dict, config, looq,: loginlog 


D. USer.Js 

modules 目录 下 的 于 模块 太 多 ， 不 方便 全 贴 ， 这 里 束 以 用 户 官 理 模块 为 例 。 
import axios from '../axios' 
/* 用 户 管 理 模 块 */ 
// 保存 


expPort const save = (data) => | 
return axios{({ url: /user/save', method: 'post'"', data ]) 


} 


// 删除 
expPort const batchDelete = (data) => 1 
return axios({f url: /user/delete', method: "post', data })} 
} 
// 分 页 查询 
export const findPage = (data) => [| 
return axios({ url: '/user/findPage', method: 'post', data }) 


} 
// 查找 用 户 的 菜单 权限 标识 集合 


export const findPermissions = (params} => | 

return axios({ url: '/user/findPermissions', method: '"'get', params }) 
} 

6. global.js 


上 面 的 配置 文件 中 引用 了 globaljs, 我 们 把 一 些 全 局 的 配置 、 常 量 和 方法 放置 在 此 文件 中 。 


/区 
* 全 局 常量 、 方 法 封装 模块 
* 通过 原型 挂 载 到 Vue 属性 
* 通过 this.global 贡 用 
ew 


// 后 台 管 理 系 统 服 务 器 地 址 
export const baseUrl = '‘'http://localhost:8001'" 
// 系统 数据 备份 还 原 服务 器 地 址 


export const backupBaseUrl = ‘http://localhost:8002" 


eXxport default I 
baseUrl, backupBaseUrl 
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六 maln.s 


修改 main js， 导 入 API 模块 ， 并 通过 Vue.use(api) 语 句 进行 使 用 注册 ， 这 样 就 可 以 通过 
“this.$api. 子 模块 .方法 ”的 方式 来 调用 后 台 接 口 了 。 
引 入 global 模块 ， 并 通过 Vue.prototype.global = global 语句 进行 挂 载 ， 这 梓 束 可 以 退 过 
this.gloabl.xx 来 获取 全 局 配置 了。 


import Vue from ‘vue"' 

import 有 PP from './App' 

import router from './router'’ 
import api from "./http" 

import global from ‘'@/utils/global' 
import ElementUl from "element—ui' 


import "'element-ui/lib/theme-chalk/index.css' 


Vue.use (ElementUI) // 注册 使 用 Element 


Vvue.use (api) // 注册 使 用 API 模块 
Vue.prototype.global = global // 挂 载 全 局 配置 模块 


new Vue (1{ 

el: '#app', 

router, 

render: h => h (App) 
}) 


22.1.5 ” 安 闭 js-cookie 


在 上 面 的 axios.js 中 ， 会 用 到 Cookie 获取 token， 所 以 需要 把 相关 依赖 安装 一 下 。 执 行 以 
下 命令 ， 安 六 依赖 包 ， 如 图 22-3 所 示 。 


Varn add Js—cookie 


$ yarn add Js-cookie 
Yarn add v1.13.0 
Warning 。.\.. “package.]Json: No license field 
warning package-lock.]Json found. Your project contains lock files generated by 
01s Other than Yarn. It 15 advised not to mx package managers 1n Order to avo1 
d resolution inconsistencies caused by unsynchronized lock files. To clear 七 hTS 
warning, remove package- lock.]Json. 
[1L75] ValTdatTng package.]son。。. 
[2/5] Resolving packages... 
EE 
info fsewvents@1.2.4: The platform "win32” 15 1ncompatiible with this module. 
1nfo i A i an Dpt1Tonal dependenmcy and fa11ed compat1TbT 11tv Check。 
Excluding 1t from 1nstallat1ion. 
1475] LTmkTnmg dependemcTes. 。 
5| Building fresh packages... 
SUCCeSS Saved lockf7 le. 
SUCCESS Saved 1 new dependency. 
info Direct dependencies 
LL js-cookie@2.2.0 
info All dependencies 


图 22-3 
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22.1.6 测试 案例 
1. 登录 页 面 


在 登录 界面 Login.vue 中 ， 这 加 一 个 登录 按钮 ， 单 击 处 理 困 数 通 过 axios 调用 login 接口 
成 功 返 回 之 后 ， 弹 出 框 ， 显 示 token 信息 ， 然 后 将 token 放 入 Cookie 并 跳 转 到 主页 。 


<template> 
<div Class= page > 
<h2>Login Page</h2> 
<e1l-—-button type=" primary™ @click"login() "> 登录 </el-button> 
</div> 


</template> 


<Script>» 
import mock from ‘'@/mock/mock.js'; 
import Cookies from "JSs-Cookie™; 
import router from '@/router' 
export default { 
name: "Loglin 
methods: 1 
Jogin(}y 1 
this.sapi.login.login() .then (function (res) { 
alert (res.token) 
Cookies.set('token', res.token) // 放置 token 到 Cookie 
router.push('/') // 登录 成 功 ， 跳 转 到 主页 
}) .catch (function(res) fT 
alert (res); 


Js 


} 


</ /script> 

2. Mock 接口 

在 mock.js 中 添加 login 接口 进行 拦截 ， 返 回 一 个 token。 
import Mock from ‘mockjs" 
Mock.mock ('http://localhost:8001/login"', 


'token': 1332fr3e3rfsdfd' // 令 有 牌 
}) 
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Mock.mock ('http://localhost:8080/user', 
'name': '@name'， // 随机 生成 姓名 
'name': '@email'，// 随机 生成 邮箱 
"age11-10'": 5，// 年 龄 在 1 一 10 岁 之 间 

}) 

Mock.mock ('http://localhost:8080/menu', 
'id': "'@increment',，// id 自 增 
'name': Imenu'，// 名 称 为 menu 


'order|1-20"': 5，// 排序 在 1 一 20 之 间 


}) 
3. 页 面 测试 
在 浏览 器 中 访问 http://localhost:8080/#/login， 显 示 登 录 界 面 ， 如 图 22-4 所 示 。 
ba GCG © localhost:8080/#/login 
Login Page 
22-4 
单 击 “登录 ”按钮 ， 弹 出 框 ， 显 示 返 回 的 token 信息 ， 如 图 22-5 所 示 。 
localhost:8080,#;/login 
localhost:38080 显示 
332fr3e3rfsdfd 
Login Page 
旬 22-5 
单 击 “ 确 定 ” 按 钮 之 后 ， 页 面 跳 转 到 主页 ， 说 明 我 们 的 axios 模块 已 经 成 功 封 装 并 使 用 了 ， 
如 图 22-6 所 示 。 


€ FF © (© localhost8080/#/ 


Home Page 
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为 了 可 以 统一 管理 和 集中 控制 数据 模拟 接口 ， 我 们 对 mock 模块 进行 了 封装 ， 可 以 方便 
地 定制 模拟 接口 的 统一 开关 和 个 体 开 关 。 


文件 结构 


22.2.1 
在 mock 目录 下 新 建 一 个 index.js ;创建 modules 日 录 并 在 里 备 


如 图 22-7 所 示 。 


1. Index.js 


index.js 是 聚合 模块 ， 统 一 导入 所 有 和子 模块 并 通过 调用 mock 进行 数据 模拟 。 


import 
import 
import 
import 
import 
import 
import 
import 
1mport 
i1mport 
i1mport 


1mport 


1 创建 子 模块 的 *.js 文件 ， 


4 mock 
a modules 
dept.js 
dictJs 
log.js 
login.s 


rmenu.|s 


role.js 


图 22-7 


Mock from ‘mockjs" 


{ baseUr]l } from ‘'@/utils/global' 


* as 
* as 
* as 
* as 
* as 
* as 
* as 
二 局所 
* as 


x as 


Jogin from "'./modules/login' 


0 富安 1 
rle 
deprte 
menu 
dict 
dict 


config from 


rom 
二 rom 
二 rom 
rom 
二 rom 


from 


/modules/user'" 


-/modules/role' 
- /modules/dept'" 
./modules/menu' 
- /moqdules/dict" 
- /modules/dict' 


'./modules/config'" 


log from './modules/log' 


loginlog from './modules/loginlog' 


// 1. 开局 /关闭 [所 有 模块 ] 拦 截 ， 通 过 调用 [openMock 参数 ] 设置 
// 2. 开启 /关闭 [业务 模块 ] 拦 截 ， 通 过 调用 fncreate 方法 [isopen 参数 ] 设置 
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// 3. 开局 /关闭 [业务 模块 中 某 个 请 求 ] 拦截 ， 通 过 函数 返回 对 象 中 的 [isopen 属性 ] 设置 
let openMock = true 

上/ let openMock = false 
fnCreate (login, openMock) 
fnCreate (user, openMock) 
fnCreate (role, openMock) 
fnCreate (dept, openMock)} 
fnCreate (menu, openMock) 
fnCreate (dict, openMock) 
fncreate (config, openMock) 
fnCreate(log, openMock) 
fnCreate(loginlog, openMock) 


/二 二 
* 创建 mock 模拟 数据 

* Qparam {*} mod 模块 

* Q@param {*} isopen 是 否 开 局? 
wd 


function fnCreate {mod, isOpen = true) { 


if (ISOPen) { 
for (var key in mod) ({ 
(TERS)I > 
i (res.isOpen !== Talse) I 
let url = baseUrl 
if({iurl.endsWith("™/™"})) 1 
enw 
} 
Hl NF Freserl 
Mock.mock (new ReoExp (uril}, res.type, (opts} => 1 
DOPtsl data | = opts.body ? JSON.parse(lopts.body) : null 
delete opts.body 
console.l1og('\n’) 
console.l1og('$cmock 拦截 ， 请 求 : “Color:blue's Opts) 
console.l1ogl(' $cmock 拦截 ， 啊 应 : rr ‘Color:blue', res.data) 
return res.data 
}) 
} 
] (mod[key] (} 11 {}) 
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2. USer.jS 


子 模块 modules 下 的 代码 太 多 ， 不 方便 贴 出 来 ， 这 里 以 用 户 管理 模块 为 例 ,格式 跟 后 台 接 
口 保持 一 致 。 


/* 用 户 管理 模块 */ 


// 保存 
export function save() 1 
return { url: 'user/save', type: 'post', 


data: { “code : 200, "msg"”: null, "data": 1 } 


} 
// 批量 删除 
export function batchDelete() I 
return { url: user/delete', tvype: ‘'post"', 


data: { "code™: 200, 了 SI: null, "data": 1 上 } 


} 
// 分 页 查询 
export function findPage (params) 1 
let fijndPageData = { “code™: 200, "msgq"”: null,; "data"”: 1} 上 } 
Jet pageNum = 1 
leEe PageSsize = 08 
let content = this.getContent (pageNum, pageSize) 
findPageData.data.pageNum = pageNum 
findPageData.data.pageSize = pageSslize 
findPageData.data.totalSize = 20 
findPageData.data.content = content 
return { url: user/findPage', type: 'post', data: findPageData } 
} 
export function getContent (pageNum, pageSize) | 
let content = | 
for(let i=0; i<pageSize; i++) { 
let ob] = {} 


let index = ((PageNum — 1) * pageSsize) + i+1 

ob] .1id = lindex 

Db] .mame = "mango" + index 

Db] .password = '9ec9/o50e109431l1dad22365cabcoc625482e' 
Db] .salt = “YzCmC2NVPXDCISZ9cm8e 

obj.email = mango'" + index +'@ag .com' 

obj.mobile = "18688982323" 

ob] .status = 1 

ob] .deptId = 12 


221 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


obj .deptName = 技术 部 ， 
DbD] - Status = 1 
if(i 告 2 === 0) { 
obj .deptld = 13 
ob] .deptName = ' 市 场 部 ' 
} 
ob] .createBy= "admin' 
ob]j] .createTime= 2018--08-14 11:11:11" 
ob] .createBy= ‘"'admin' 
ob] .createTime= "2018-09-14 12:12:12" 
content .push (ob]) 
} 
return content 
} 
// 碍 找 用 户 的 菜单 权限 标识 集合 
eXxport function findPermissions() 1 
Jet permsData = { "code™: 200, "msg"”: null, 
"data™: | 
"SVyS:uUSer:view"r "SySs:menu:delete", "sySs:dept:edit"™, "sys:dict:edit", 
"sys:dict:delete", "sys:menu:add","sys:user:add", "syS:1]0g:Vilew", 
"sys:dept:delete", "sys:role:edit", "sys:role:view"y, "SYyS:dict:view 
"sySs:uSsSer:edit", "sys:user:delete", "sySsS:dept:view" yr SySs:dept:add"™, 
"Swe: Tole delelte ono mn view Sveo men edil sveasict Idd 
] 
} 


return { url: user/findPermissions', tvype: 'get', data: permsData 1} 


22.2.2 登录 表面 
修改 登录 界面 ， 包 括 导入 语句 和 返回 数据 格式 的 获取 ， 如 图 22-8 所 示 。 


loginmrty { 
login() { 


-$api.login.login().thent( 


图 22-8 
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22.2.3 主页 表面 
修改 主页 界面 ， 替 换 导入 mock 文件 的 语句 ， 如 图 22-9 所 示 。 


图 22-9 


22.2.4 页 面 测 试 

在 浏 贤 占 中 访问 http:Wlocalhost:8080/ 扩 login， 按 照 先 前 的 流程 走 一 通 ， 如 宋 没 有 问题 束 封 
闭 好 了 。 

在 登录 界面 中 ， 早 击 “ 登录” 按钮 ， 在 弹出 框 中 返回 token 信息 ， 如 图 22-10 所 示 。 


© localhost:8080,/#/login 


Iocalhost:8080 显示 
332fr3e3rfsdfd 


Login Page 


图 22-10 
登录 成 功 之 后 ， 香 定 同 到 主页 面 ， 如 图 22-11 所 示 。 


去- CGC © localhost:8080/#/ 


Home Page 
测试 Axios 调 用 获取 用 户 信息 获取 芋 单 信息 


图 22-11 


到 此 ，axios 模块 和 mock 模块 部 封 溉 好 了 ， 后 续 使 用 只 要 参考 此 处 的 柔 例 即 可 。 
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军 二 万 图 杯 库 


使 用 第 三 方 图 标 库 


用 过 Element 的 人 都 知道 ，Element UI 提供 的 字体 图 符 少 之 又 少 ， 实 在 不 够 用 ， 圣 好 现在 
有 不 少 丰 二 的 第 三 方 图 标 库 可 用 ， 引 入 也 不 会 很 麻烦 。 


Font Awesome 


Font Awesome 提供 了 675 个 可 缩放 的 天 量 图 标 , 可 以 使 用 CSS 所 提供 的 所 有 特性 对 它们 
进行 更 改 ， 包 括 大 小 、 颜 色 、 阴 影 或 者 其 他 任何 支持 的 效果 。 

Font Awesome 5 跟 之 前 的 版 本 使 用 方式 差别 较 大 ， 功 能 是 强大 了 ， 图 标 也 更 丰 训 了 ， 但 
使 用 也 变 得 更 加 复杂 了 。 

右 是 再 求 没 那 么 复杂 ， 只 要 简单 的 有 图 标 可 用 束 行 了 ， 还 是 之 前 的 版 本 、 安 荫 容易 、 使 用 

网 上 相关 介绍 很 多 ， 这 里 束 不 废话 了 ， 更 多 详情 可 参见 官方 信息 ， 网 址 为 


http://fontawesome.dashgame.com/。 


23.2.1 安装 依赖 
执行 yarn add font-awesome 节令 ， 安 装 font-awesome 依赖 ， 执 行 结 果 如 图 23-1 所 示 。 


23.2.2 项 目 5| 入 


在 项 目 main.js 中 引入 css 依赖 ， 可 执行 Inport 'font-awesome/css/font-awesome.min.css' 合 
令 ， 如 几 23-2 所 示 。 


图 23-1 


图 23-2 


23.2.3 页 面 使 用 
项 目 引 入 之 后 , 直接 在 页 面 使 用 束 可 以 了 , 修改 Home.vue, 加 入 一 个 图 标 , 如 图 23-3 所 示 。 


Bclick="testAxios()"> 测 斌 xios 计 用 
i "> 渎职 用 户 信 息 


@@cLick="getMenuf) ”> 洲 职 革 音 依 息 


23.2.4 ”页 面 测试 
局 动 应 用 ， 访 问 http://localhost:8080/#， 效 果 如 图 23-4 所 示 。 


GD localhost:3080/¥) 


Home Page 


ED Ee 


图 23-4 


就 是 这 么 简单 ， 束 古 这 么 好 用 ! 
为 外 ， 还 可 以 选择 CDN 方式、 下载 方式 寺 ， 这 里 束 不 说 了 ， 有 兴趣 的 可 目 行 盒 阅 。 


e 官方 网 址 : http://fontawesome.dashgame.com/ 
e 审 方 教程 : https://fontawesome.com/how-to-use 
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坊 1 二 车 国际 化 


国际 化 多 语言 文 持 是 现在 系统 通 贡 都 要 具备 的 功能 ，Vue 对 国际 化 提供 了 很 好 的 文 持 ， 本 
草 我 们 束 来 讲解 如 何 实现 国际 化 。 


安装 依赖 


首先 需要 安装 国际 化 组 件 ， 执 行 yarn add vue-il8n 命令 ， 安装 118n 依赖 ， 如 图 24-1 所 示 。 


yarn add vi.13.0 
warning package-1ock.]son found. Your project contains lock fi les 
oo0ls other than Yarn. It 71s advised not to mx package managers 1n order to avo] 
resolution inconsistencies caused by unsynchronized lock files. To Clear this 
remove package- lock. 
Validating package.]Json... 
[2/5] Resolving packages... 
[375] FetchTng packages。. 。 
info Tsevents@i.2.4: The platform "win32 
Fo Tsevents@l.2.4 7171s an optional dependency and Tailed compat1b1 lty check. 
Excluding 71t from 1nstallat1ion. 
[4/5] LTnkTng dependenciles... 
|] Building fresh packages. .. 
cess Saved lockf7le. 


Cess Saved 1 new dependency. 


1s 1ncomatible with this module 


mrect dependencies 


11 dependenciles 


ruUe=-11]8neB.7.0 


图 24-1 


闲 加 配置 


在 src 下 新 建 i118n 目录 ， 并 创建 一 个 index.js。 


1ImPOFL Vue from ‘vue"' 


import VuellBn from ‘vue—il8n' 
Vue.use (VueIl8n) 


// 注册 i18n 实例 并 引入 语言 文件 ， 文 件 格式 等 一 下 解析 


const 118n = new VueIl8n(1 
Iocales "zh cn’ 
messagess | 
‘zh cn': require(l'@/assets/languages/zh cn.json'), 
"en ns regquirel(l'Q@/assets/languagqes/en us Son") 
} 
}) 


export default 1il18n 


然后 在 assets 目录 下 面 创建 两 个 多 语言 文件 ， 如 图 24-2 所 示 。 


图 24-2 


zh_cn.json 


"common"™: { 
"home": "首页 ", 
"opgin": "登录 ", 
"logout": "退出 登录 ", 
"oc™ "Ww 
"blog": "博客 ", 
1// ”省 略 其 他 


en us.json 


"Common™”: 1 
"home": "Home”, 
“Jogin™: "Login”, 
“Jogout™: "Logout”"™, 
"doc™: "Document™, 
"bloog™: “BLOG ， 


// 省 略 其 他 


在 main.js 中 引入 il8n 并 注入 vue 对 象 中 。 
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import Vue from “YUE 

import App from "'./App' 

import router from './router' 

import api from ‘"./http'’ 

import ilB8n from "./il8n" 

import global from ‘'@/utils/global' 

import ElementUlIl from "element—ui' 

import ‘element—ui/lib/theme—-chalk/index.css' 


import ‘font-awesome/css/font-awesome.min.css' 


Vue.use (ElementUI) // 注册 使 用 Element 


vue.use (api) // 注册 使 用 API 模块 


Vue.prototype.global = global // 挂 载 全 局 配置 模块 


new Vue (1{ 

el: '"#app', 

il8n, 

router, 

render: h => h (App) 
}) 


a 5 i | 
| Fr ”| EE } 
| | J I 
天 | | | ] 
1 ES i 二 i i Fr 
Mm WoW ~“ 


在 原本 使 用 字符 串 的 地 方 引 入 国际 化 字符 串 。 
打开 Homevue， 在 模板 下 面 请 加 一 个 国际 化 字符 串 和 两 个 投 钮 做 中 英文 切换 。 


<h3>{{$t (common.doc’'} }1</h3> 

<1l—button Evpe= SUCCeEss” @click="changeLanguage ("zh cn')"> 简 体 中 文 
</el-button> 

“lbDutton tvpe= SUCCess™ 


@click="changeLanguagel{'en us'}">English</el-—button> 
在 方法 声明 区 域 添 加 以 下 方法 ， 设 置 国际 化 语言 。 
// 语言 切换 


changeLanguage (lang) ({ 
Tanqgl=== 3 zen -Lando 
this.$il8n.locale = lang 
this.langVvisible = false 
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2 和 .全 页 面 测试 


启动 应 用 ， 访 问 http://localhost:8080/#/， 进 入 主页 ， 如 图 24-3 所 示 。 


”GG OO localhost8080/#/ 


Home Page 
| os 获取 用 户 信息 
文档 


74-3 


单 击 English 按钮 ， 国 际 化 字符 变 成 英文 ， 如 图 24-4 所 示 。 


Home Page 


| 


图 24-4 
单 击 “简体 中 文 ”按钮 ， 国 际 化 字符 变 回 中 文 ， 如 图 24-5 所 示 。 


Home Page 


”测试 Axios 调 用 获取 荣 单 信息 


24-5 


通过 this.$il8n.locale = xx 方式 就 可 以 全 局 切换 语言 ，Vue 框架 会 根据 locale 的 值 读 取 对 
应 的 国际 化 多 语言 文件 并 进行 适时 更 新 。 
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| 
| 


Ste 


登录 界面 


25.1.1 表面 设计 
首先 我 们 简单 设计 一 下 登录 界面 ， 标 清楚 就 行 ， 然 后 照 着 写 页 面 ， 如 图 25-1 所 示 。 


系统 登录 
请 葵 入 用 户 名 
请 输入 用 户 密码 


25.1.2 ”天 键 代 码 

由 于 页 面 内 容 太 多 , 不 便 全 贴 ， 至 于 页 和 面 组 件 布局 什么 的 直接 查阅 代码 即 可 。 这 里 香 点 讲 
解 一 下 登录 的 逻辑 。 登 录 方 法 内 容 如 下 面 所 示 ， 主 要 逻辑 是 调用 后 台 登 录 接 口 ， 并 在 登录 成 功 
之 后 保存 token 到 Cookie， 保 存 用 户 到 本 地 存储 ， 然 后 跳 转 到 主页 面 。 


login(})} 1{ 
this.loading = true 
let userlInfo = 1 account:this.1loginForm.account, 


password:this.1oginForm.password, 
captcha:this.1loginForm.captcha 上 
this.$api.login.login (userInfo) .then((res) => { // 调用 登录 接口 
i (res.msg = null} I 


this.smessage({ message: res.msg, type: 'error' }) 


第 25 章 ”登录 流程 完善 


} else | 
Cookies.set('token', res.data.token) // 放置 token 到 Cookie 


sessionStorage.setItem{('user', userinfo.account) /J/ 保存 用 户 到 本 地 会 话 
// 登录 成 功 ， 跳 转 到 主页 


Enis SoranlEer usa ") 


} 
this.loading = false 


1 .catch((res) => 1 


this.smessage({ message: res.message, type: ‘error' }) 


}) 


主页 面 


25.2.1 齐 面 设计 
和 完税 持 设 计 一 下 主页 和 面 刺 体 框 案 ， 青 照看 俊 计 图 编号 页 面 ， 如 图 25-2 所 示 。 


Ee 


pp 


25.2.2 关键 代码 
页 面 内 容 太 多 ， 不 便 全 贴 ， 至 于 页 面 组 件 布 局 什么 的 请 读者 直接 查阅 代码 即 可 。 我 们 在 
views 下 面 另 外 添加 几 个 页 面 文件 ， 分 别 为 头 部 、 左 侧 寻 航 和 主 内 容 区 域 ， 如 图 25-3 所 示 。 


VieWs 


十 O04 Ue 


4 25-3 


231 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


1. Home.VvVue 


主页 由 导航 染 单 、 头 部 区 域 和 主 内 容 区 工 组 成 。 


<template> 

<djv class="contaijiner"> 
<!-- 导航 菜单 栏 --> 
<nav-bar></nav-bar> 
<1-- 头 部 区 域 --> 
<head—bar></head—bar> 
<1 在 内 次 区 域 > 
<main—-content></main-content> 

</div> 


</template> 


<ScCript> 
import HeadBar from "./HeadBar™" 
import NavBar from "./NavBar" 
import MainContent from "./MainContent™ 
export default I 
components:!1 
HeadBar, 
NavBar, 
MainContent 
} 
}; 


<racripnt> 


// css 代码 省 略 


2. HeadBar.vue 
头 部 导航 主要 是 设置 样式 ， 并 在 右 侧 湛 加 用 户 名 和 头像 显示 。 


<template> 
<div class="headbar™" style="background:#14889A™ :class=""'position-left'™"> 
<!-- 工具 栏 --> 
<span class="toolbar"> 
<el-menu class="el-menu-demo™" background-—-color="#14889A"™ 
text—-color="#14889A" active-text-color="#14889A™" mode="horizontal™"> 
<el—menu-—item index="]1™"> 
En 
<span class="user-info"><img :src="user.avatar™. />{{user.namel}}</span> 


< /el-menu 一 七 em> 
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</el—menu> 
</span> 
</div> 


</template> 


// 省 略 js 和 css 代码 
3. NavBar.vue 
左 侧 导航 包含 上 方 Logo 区 域 和 下 方 导航 六 单 区 域 。 


<template> 
<div class="menu-—bar—container"> 
lI 一 一 T0906 一 一 ~ 
<div ClLass="1ogqo"” style="background:#14889A™" :class=""'menu-bar-width"'™" 
Bclick="$router.push(/")} "> 
<img src="@/assets/logo.png"/> <div>Mango</div> 
</div> 
</div> 


</template> 


// 省 略 css 样式 


4. MainContent.vue 


主 内 容 区 域 包含 标签 页 寻 航 和 主 内 容 区 域 ， 在 主 内 容 中 放置 route-view， 用 于 路 由 信息 。 


<template> 
<div id="main—~container™” Class="main—container™” :class=" "position—left'"»> 
| = 
<div class="tab-container"></div> 
<1= 本 内 容 区 域 一 > 
<div Class=" "main—content"»> 
<keep—alive> 
<transition name="fade™ mode="out-—in"> 
<router—view></router—view> 
</transition> 
</keep-alive> 
</div> 
</div> 


</template> 


// 省 略 css 样式 
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局 动 应 用 ， 访 问 http://localhost:8080/#/logm， 进 入 登录 界面 ， 如 图 25-4 所 示 。 


和 3 GG 加 Ilocalhost8080/#/login 


图 25-4 
单 击 “ 登 录 ” 按 钮 ， 登 录 成 功 之 后 跳 转 到 主页 面 ， 如 图 25-5 所 示 。 


六 巴 localhost:8080/#/ 


25-5 
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忆 挂 羽 用 准 念 


在 很 多 应 用 场景 下 , 我 们 需要 在 组 件 之 间 共 胖 状 态 ， 比 如 我 们 的 左 侧 寻 航 栏 需要 收缩 和 展 
开 的 功能 ,收缩 状 态 时 锅 度 很 小 ， 只 显示 沫 单 图 标 ， 因 为 导航 来 单 栏 收缩 之 后 宽度 变 了 ， 所 以 
右 侧 的 主 内 容 区 域 要 占用 寻 航 栏 收 缩 的 空间 , 主义 容 区 域 宽度 也 要 根据 导航 栏 的 收缩 状态 做 变 
更 ， 而 寻 航 栏 和 主 凡 容 区 域 是 两 个 不 同 的 组 件 ， 而 非 父 子 组 件 之 间 不 文 持 状态 传递 ,所 以 组 件 

之 间 的 状态 共享 问题 发 生 了 。vuex 是 一 个 专 为 vuejs 应 用 程序 开发 的 状态 管理 模式 。 它 采用 
集中 却 存 储 祝 理应 用 的 所 有 组 件 的 状态 ,并 以 相应 的 规则 保证 状态 以 一 种 可 预测 的 方式 及 生 变 
化 。 本 章 将 通过 实现 左 侧 寻 航 栏 的 收缩 展开 功能 来 讲解 怎样 使 用 vuex 来 管理 应 用 状态 。 

更 多 vuex 的 资料 可 参考 : https://vuex.vuejs.org/zh/。 


执行 yarn add vuex 命令 ， 安 装 vuex 依赖 ， 如 图 26-1 所 示 。 


warning package-lock. Json found. Your project contains lock files generated by 七 
o0l1s other than Yarn. It is advised not to mix package managers in Order to avoi 
d resolution inconsistencies caused by unsynchronized lock files. To clear this 
warning: remove package- lock, -Json. 

ED Ei 
L275 Resol ng packages. .. 

3/5] Fetching packages.. 
if fseventsal .2.4: The re "Win32" 了 号 incompatible with this module. 
info "fsevents&@1i.2.4" 1s an optional dependency and failed compatibility check. 
Excluding 1t from a 

ETENN depenmdenmcTes。。， 

EEDA a 
suCCess Saved lockf7 le. 
suUccess Saved 1 new dependency. 
info Direct dependencies 
| 
info All1 dependencies 
[一 vuex@3.0.1 
Done 1n 29.91s5. 


图 26-1 


;未 store 


在 src 目录 下 新 建 一 个 store 目录 ， 专 门 官 理应 用 状态 ， 如 图 26-2 所 示 。 
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26-2 


26.2.1 Index.js 
在 index.js 中 引入 vuex 并 统一 组 织 导 入 和 管理 子 模块 。 


import Vue from vue 


import vuex from ‘vuUuex’ 


VUue.uUSe (vuUuex)}; 


// 引入 子 模块 


import app from './modules/app' 


const store = new vuex.Storel(tl 
modules: I 


app: apb 
}) 


EXPOTTt default store 


20.2.2 app.js 
app.js 是 属于 应 用 内 的 全 局 性 的 配置 ， 比 如 主题 色 、 导 航 栏 收缩 状态 等 ， 详 见 注释 。 


export default I 

state: I 
appName: "Mango Platform"， // 应 用 名 称 
themeColor: "#14889A"， // 主题 颜色 
oldThemeColor: "#14889A"， // 上 一 次 主题 颜色 
collapse:false,，// 导航 栏 收缩 状态 
menuRouteLoaded:false // 菜单 和 路 由 是 人寿 己 经 加 载 

}, 

getters: | 
collapse (state) {// 对 应 着 上 面 的 state 


return state.collapse 
} ， 


mutations: 1 


onCollapse (state) { // 改变 收缩 状态 
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state..cCollapse = lastate-.collapse 

}r 

setThemeColor (state, themeColor){ // 改变 主题 颜色 
state.oldThemeColor = state.themeColor 
state.themeColor = themeColor 

j， 

menuRouteLoaded (state, menuRouteLoaded) { // 改变 革 单 和 路 由 的 加 载 状态 


state.menuRouteLoaded = menmuRoU 上 ELOaded ; 


上 ， 
actions: 1{ 
} 


引 | 入 Store 


在 main.js 中 引入 store， 如 图 26-3 所 示 。 


| 上 i18n fron 


moport a Fare +Fan 


port slobal from 
上 后] 


port ElementUI from “， 


Vue .use(ElementUI) 


WUe .Uselap1l) 


h(App) 


图 26-3 


使 用 Store 


这 里 以 头 部 页 面 HeadBar.vue 的 状态 使 用 为 例 ， 其 他 页 面 同 理 ， 详 见 代 码 。 

首先 通过 computed 计算 属性 引入 store 属性 ， 这 样 就 可 以 直接 在 页面 中 通过 collapse 引用 
状态 值 了 , 当然 如 果 不 嫌 长 ,也 可 以 不 使 用 计算 属性 , 直接 在 页 面 中 通过 $store.state.app.collapse 
引用 ， 如 图 26-4 所 示 。 
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mounted() 1 


.User .avatar 


pStatel(l{ 
a 和 村 = 由 区 汉 5 


26-4 


然后 在 页 面 中 通过 collapse 的 状态 值 来 绑 定 不 同 的 宽度 样 式 ， 如 图 26-5 所 示 。 


und-=c De r=" "themecC Te 


26-5 


收编 组 件 
在 src 下 新 建 components 目录 ， 并 在 其 下 创建 导航 栏 收 缩 展 开 组 件 Hamburger。 


26.5.1 文件 结构 
文件 结构 如 图 26-6 所 示 。 


到 Pdi nb LU TOel 


导航 收缩 展开 组 件 


中 二 二 
Ey LA 
Rad Te i Ml i 


图 26-6 


26.5.2 ”关键 代码 

组 件 是 使 用 SVG 绘制 ， 绘 制 根据 isActive 状态 决定 是 耕 旋 转 、 显 示 收 顷 和 展开 状态 不 同 
的 图 形 ， 如 图 26-7 所 示 。 

在 头 部 区 域 HeadBar 中 引入 hamburger, 并 将 日 喘 isActive 状态 跟 收缩 状态 collapse 绑 定 ， 
如 图 26-8 所 示 。 
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根据 isActive 状态 旋转 绘制 图 标 


图 26-7 


26-8 
单 击 导航 栏 收缩 组 件 区 域 的 啊 应 函数 ， 设 置 导航 收缩 状态 到 Store。 
// 折 奸 导航 栏 


onCollapse: function(}) 1 


this.s$store.commit('onCollapse') 


外 面 测 试 


局 动 应 用 ， 访 问 http://localhost:8080/##logm， 蛙 击 “ 登录” 按钮 进入 主页 耐 ， 如 图 26-9 
所 示 。 
所 (> 全 localhost:8080/#/ 


WE esEtieiil 中 


26-9 
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单 击 导 航 栏 收缩 展开 组 件 ， 导 航 沫 单 栏 收 缩 起 来 ， 效 果 如 图 26-10 所 示 。 


€ > CG @ localhost8080/#/ 


图 26-10 
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头 郑 BE 组 什 


本 章 我 们 来 介绍 头 部 区 域 一 些 贡 用 功能 的 实现 方案 ,比如 动态 主题 切换 套 、 国 际 化 语言 切 
换 需 、 用 户 信息 弹出 面板 等 。 


主题 切换 组 件 


27.1.1 编 与 组 件 
在 components 目录 下 创建 一 个 主题 切换 亏 组 件 ThemePicker， 如 图 27-1 所 示 。 


4 components 


ED 


3 ThermeplckKer 


图 27-1 


ThemePicker 的 实现 思路 是 使 用 一 个 疝 色 选 取 组 件 el-color-picker 获取 一 个 主题 色 ， 然 后 
通过 动态 普 换 禾 盖 Element 默认 CSS 样式 的 方式 葵 换 框架 的 主题 色 primary color, 并 在 主题 色 
切换 成 功 之 后 提供 回调 函数 , 通过 此 回调 函数 同步 更 独 毅 要 更 换 为 主题 色 的 页 面 或 组 件 。 组 件 
代码 马 幅 太 多 不 便 全 贴 ， 下 面 讲 解 一 下 关键 代码 。 

组 件 使 用 el-color-picker 获取 主题 色 ， 并 绑 定 theme 属性 和 size 属性 。 


<template> 
<el1l—-color-picker class="theme-plicker” popper-class="theme—picker—-dropdown™ 
vmodel— Eneme :SiZEeE— S17 > 
/el color Dickers 


</template> 


通过 watch 监听 theme 属性 即 主题 色 的 更 新 动态 丛 换 CSS 样式 ， 修 改 主题 色 ， 并 在 蔡 换 
CSS 之 后 通过 this.$emit(onThemeChange'，val) 语 句 提 供 一 个 回调 函数 'onThemeChange' 并 将 更 
新 后 的 主题 色 的 值 val 作为 参数 传 入 , 使 得 外 部 组 件 可 以 通过 此 回调 函数 同步 更 独 外 部 组 件 闫 
色 为 主题 色 。 
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watch: 1 
theme (val, oldvVval}) I 
i (tvpeof wal 1==—= "string"} return 
// 替换 css 样式 ， 修 改 主题 色 
const themeCluster = this.getThemeClusterl(val.replace('#", '"')) 
const originalCluster = this.getThemeCluster(oldVal.replace('#"', "'"')) 
console.loogtthemeCluster,s originalCluster) 
const qetHandler = (variable, 1d})} =»> | 
return (} =»> 1 
const originalCluster= this.getThemeCluster (ORIGINAL THEME.replacel'#", 
0 
const newSstyle = this.updatestyle (thislvariapbplel, originalCluster, 
themeCluster} 


let styleTag = document .getElementBylId (1id) 
if (IstyleTag) 1{ 
stvyleTag = document.createElement ("stvyle") 
styleTag.setAttribute('id'", id) 
document.head.appendChild{(styleTag) 


} 
styleTag.innerText = newStyle 


} 
const chalkHandler = gqetHandler("chalk", ‘chalk—stvyle") 


下 下 清末 加工 和 二 人 本 | 1 天] 
const url = ‘https://unpkg.com/element—ui@s$ {version}/lib/theme—chalk/ 
index.css 
this.getcssstring(url, chalkHandler, "chalk") 
} else | 
chalkHandler() 
1 
const styles = [|-.slice.call (document querveselectorAlli'style" })} 
Tilter(stvie => 1 
Sanst Eextb style.inmnerText 
return new RegExp (oldVval, "i') .test (text}) && !/Chalk 
variablesy test (Eext) 
}) 
styles.forEach (style => | 


const 1{ innerText } = style 

if {typeof innerText 1== "string') return 

号 让 下 | 已 nnerText = this. UpdateSsStylelinnerTexts OriginalClusterr: 
themeCluster) 


}) 
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// 响应 外 部 操作 


this.semit('onThemeChange', val) 
if(this.showSsuccess) { 

this.smessage({ message: ' 换 肤 成 功 '， we loess | 
} else { 


this.showSuccess = true 


components :1 


yy 


‘backeround-color= 


yicker” :default=" themeColor” 


BonThemechanpe= onThemeChange 


图 27-3 


在 方法 区 定义 主题 切换 的 回调 函数 ， 同 步 设 置 store 中 的 themeColor， 如 图 27-4 所 示 。 


onCollapse: () 4 
$store.commit{ "onCollal 

1 

有 本 


9 


onThemeChange: (themeColor) { 
$store.commit( setThemeColor , themeColor) 


2 
1 
J 


飞 
J 
| 


图 27-4 


将 各 个 页 面 中 再 要 同步 为 主题 色 的 页 面 或 组 件 绑 定 store 中 的 主题 色 属 性 themeColor， 这 
样 每 次 通过 切换 器 切换 主题 色 的 时 候 痢 会 把 主题 色 通 过 store 传递 到 页 面 组 件 , 如 图 27-5 所 示 。 
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图 27-5 


27.1.2 页面 测试 \ 
局 动 应 有 用， 访问 http://localhost:8080/##， 早 击 图 27-6 所 示 的 切换 按钮 ， 选 择 一 个 主题 色 。 


Mango Platform | 


#0043 


图 27-6 


选取 一 个 主题 色 之 后 ， 单 击 “确定 ”按钮 ， 页 面 主题 色 成 功 痊 换 ， 如 图 27-7 所 示 。 


Mango Platform 川 


图 27-7 


语言 切换 组 件 


27.2.1 编 与 组 件 


在 HeadBar.vue 工具 栏 主题 切换 器 右边 放置 一 个 语言 切换 组 件 , 可 以 选择 中 英文 两 种 语言 ， 
如 图 27-8 所 示 。 
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语言 切换 啊 应 图 数 ， 设 置 local 值 并 让 弹出 下 拉面 板 消失 ， 如 图 27-9 所 示 。 


图 27-8 27-9 


在 头 部 工具 栏 左 侧 放 置 一 些 溪 单项 ， 使 用 国际 化 字符 串 ， 以 测试 多 语言 切换 效果 ， 如 
27-10 所 示 。 


图 27-10 


27.2.2 页 面 测 试 
局 动 应 用 ， 访 问 http://localhost:8080/##， 早 击 如 图 27-11 所 示 的 语言 切换 按钮 ， 选 择 语言 


VW ETT El 中 


简体 中 区 


English 


图 27-11 
页 面 上 的 国际 化 字符 串 成功 切 换 为 喘 文 字 伯 ， 如 图 27-12 所 示 。 


Mango Platform | Documei Document Blog 图 部 admin bs) 


图 27-12 
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] 
| | 并 
| | ee | 
a Fr 和 F hp 
| 到 | 
= | EE 
| 


27.3.1 编写 组 件 

在 views 目录 下 新 建 core 日 录 并 在 其 下 新 建 一 个 用 户 信 息 面 板 PersonalPanel.vue， 在 单 击 
用 户头 像 时 弹出 用 户 信 息 面 板 ， 和 面板 显示 用 户 信 息 和 一 些 功 能 操作 。 

用 户 信 息 面 板 页 面 内 容 如 下 : 


<template> 
<div class="personal—panel™" > 
<dijv class="personal—desc"” :style="{ "background": 
this.sstore.state.app.themeColor}"> 
<div class="avatar—container" > 
<img Class="avatar™ :src=—"require('@/assets/user.png'}™ /> 
</div> 
<div Class=" name—rOle”> 
<span class="sender">{{ user.name }} - {{ user.role }}</span> 
</div> 
<div Class=" "registe—info"> 
<3pan Class="registe—info"™> <li class="fa fa—clock—o"™></1i> 
{{ user.registelinto 1}} 
</span> 
</div> 
</div> 
交加 可 Class=" "personal—relation’> 
<span class="relation-item">followers</span> 
<span class="relation-item">watches</span> 
<span class="relation--item">friends</span> 
</div> 
<div Class="main—operation"> 
<SPan class="main~operation—item"> 
<el—button size=" small™ icon="fa fa-male"> 个 人 中 心 </el-putton> 
</span> 
<Span class="main—operation—item"»> 
<el—button size="small™” icon="fa fa—key" > 修改 密码 </el-button> 
</span> 
</div> 
<div Class="other—-operation" > 
<div Class="other-operation—item"> 


<1i class="fa fa-eraser"></1i> 清除 缓存 </aiv> 


eh 
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<div Cass= "other—operation—item"> 
<1i class="fa fa—user"></1i> 在 线 人 数 </div> 


<div Cass= "other—-operation—jtem"> 
<]1i class—"fa fa bell"™></1i> 访问 次 数 </div> 


<div Class=" other—operation—litem"> 
<1i class="fa fa—undo™></1i>{{$t("common.backupRestore™)}1}</div> 


</div> 
<div Class="personal-—footer™ Rclick="logout™> 


<1i class="fa fa—sign—out"></1i> {{$t{"common.logout"™)}} 


</div> 
</div> 


</template> 


// 省 略 其 他 内 容 
退出 登录 处 理 函 数 ， 确 认 退 出 后 清空 本 地 存储 ， 人 返回 登录 界面 并 调用 后 台 退 出 登录 接口 ， 


如 图 27-13 所 示 。 


logout: (}y{ 
.$confirm( "ARDS?", 


4 -| ji 
;| a 
| 机 本 加 且 


L' 
J 4 

We 
sessionStorage.removelteml( 


) 


") 


.router .push 
$apl.1ogin. logout{).then( (res) 
}).catch( (res) { 

}) 
11 
J | 
.catch(() 
1 
J 


图 27-13 
在 涉 部 区 域 引入 组 件 ， 在 用 户头 像 信息 组 件 下 通过 popover 组 件 关 联 用 户 信 息 和 面板 ， 如 图 


27-14 所 示 。 


popover :pODOVer-personal 


{usSer .name 


二 [| 3 SE 本 
SmC= USermn .avatar 上 上 
trigger= 


placement=" bo 


图 27-14 


27.3.2 页面 测试 
启动 应 用 ， 访 问 http://localhost:8080/#Wlogin， 单 击 “ 登 录 ” 按 钮 ， 进 入 主页 面 ， 单 击 头像 


区 域 ， 弹 出 用 户 信 息 和 面板， 效果 如 图 27-15 所 示 。 
253 


Spring Boot+Spring Cloud+Vue+Element 项 目 实战 : 手把手 教 你 开发 权限 管理 系统 


rw 村 请 得 ,on 
Mango Platform 训 admiin bot 


人 
adrnin - 在 妇 管 理 品 
曾 迁 册 时 间 : 2018-12-20 


follomwers watches friends 


下 个 人 中心 久 司 政大 如 


学 清除 织 存 
是 在 举人 粘 
晶 访问 次 瑙 


马 雷 愉 还 原 


图 27-15 


单 击 信息 面板 最 下 面 的 “退出 登录 ”按钮 ， 弹 出 退出 确认 提示 框 ， 单 击 “ 确 定 ” 按 钮 返回 
登录 界面 ， 如 图 27-16 所 示 。 


27-16 


2 2 了 .A 系统 通知 面板 


27.4.1 编 瑟 组 件 


在 views/core 目录 下 新 建 一 个 系统 通知 面板 NoticePanel.vue， 在 头 部 工具 栏 添加 系统 通知 
组 件 ， 单 击 弹出 系统 通知 信息 面板 。 
系统 通知 面板 页 面 内 容 如 下 ， 主 要 通过 遍历 通知 信息 列表 展示 。 


<template> 
<div Class="notice-—panel™> 
<diyw class="header">3 您 有 {{data.length}} 条 通知 </div> 
<Jdiv Class="notice—content"> 
<div Vv-for="item in data” :kevy="item.key” class=" "notice—item"»> 
<Span Class="notice—icon” > 
<1i :class="item.icon™></1i> 

</span> 
<Span Class="notice—cotent" > 


{{ item.content 1}} 
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</span> 
</div> 


</div> 
<div class="notice-footer”"> 查 看 所 有 通知 </div> 


</div> 


</template> 


// 省 略 其 他 信息 
在 头 部 区 域 HeadBar.vue 中 引入 组 件 并 通过 popover 组 件 关 联通 知 面 板 , 如 图 27-17 所 示 。 


V-pPopover : POPOVer-mot1l1cCe 


ndex= 


placement= 


图 27-17 


27.4.2 页面 测试 
局 动 应用， 访问 http://localhost:8080/#/logimm， 单 击 “ 登 录 ” 按 钮 ， 进 入 证 页面 ， 单 击 通 知 
区 域 ， 弹 出 系统 通知 面板 ， 效 果 如 图 27-18 所 示 。 


前 


admin bs 


MEL El | 
你 有 4 条 通知 
回 你 修改 了 用 户 密码 
月 你 修改 了 用 户头 像 


这 仿 日 25 名 新 成 品 0 六 


音 看 有 有 迄 知 | 


图 27-18 


用 户 私 信和 面板 


27.5.1 编写 组 件 
在 views/core 目录 下 独 建 一 个 用 户 私 信和 面板 MessagePanelvue， 在 头 部 工具 栏 添 加 用 户 私 


信 组 件 ， 单 击 弹出 用 户 私信 信息 面板 。 
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用 户 私 信和 面板 页 面 内 容 如 下 ， 主 要 通过 退 历 私信 信息 列表 展示 。 


<template> 
<div Classs—" message—panel"> 
<dliVv class="messagde-header"> 您 有 { daata。 Teng 七 上 上 上 条 消息 </div> 
<div Class= meEssage—Content > 
<div Vv-for="item jn data”™ :key="item.key” class="message——item"> 
<div Class=" message—avatar’'> 
<img class="avatar™ :src="require('@/assets/user.png')})™ /> 
</div> 
<Span Cass= SeTmaeTrT > 
{{ item.sender 上 | 
</span> 
<Span class="time"> 
<1i class="fa fa—clock—o"></1i> {{ item.time }} 
</span> 
<div Class=" "message—cotent"> 
{{ item.content }} 
</div> 
</div> 
</div> 
<QiVv class="messagde-footer"> 查 看 所 有 消息 </div> 
</div> 


</template> 


在 头 部 区 域 HeadBar.vue 中 引入 组 件 并 通过 popover 组 件 关 联 私信 面板 , 如 图 27-19 所 示 。 


色 27-19 


27.5.2 页面 测试 
启动 应 用 ， 访 问 http://localhost:8080/#Wlogin， 单 击 “ 登 录 ” 按 钮 ， 进 入 主页 面 ， 单 击 私信 
区 域 ， 强 出 用 户 私 信 四 板 ， 效 果 如 图 27-20 所 示 。 
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EU elE:luiel nn ||| 


你 有 5 条 消息 


诸 龟 亮 
你 修改 了 用 户 密码 


武则天 站 2 小 时 前 
你 收 收 了 用 户 涉 伪 


, 王 语 尹 
今日 25 和 名 新 成 员 加 入 


人 多 您 点 表 了 一 篇 新 随笔 


上 官 婉 儿 
您 发 表 了 一 篇 新 随笔 


查看 所 有 漠 息 


图 27-20 
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第 28 章 
可 念 加 载 菜单 


本 章 我 们 将 讲解 如 何 动态 加 载 数 据 库 的 玉 单 数据 并 显示 到 寻 航 栏 。 


水 加 Store 


我 们 先 添 加 几 个 store 状态 ， 后 续 需 要 用 来 共 孚 使 用 。 
首先 在 store/modules 下 的 app.js 中 添加 一 个 menuRouteLoaded 状态 ， 判 断路 由 是 否 加 载 
过 ， 如 图 28-1 所 示 。 


图 28-1 


然后 在 store/modules 下 新 建 一 个 menu.js， 在 index.js 中 引入 ， 里 面 保存 大 加 载 后 的 导航 


export default I 
state: ff 


navTree: []， ，// 导航 菜单 树 
上 
加 革 EEEEESE 员 本 


} ， 


mutations: f 


setNavTree (state, navTree}){ // 设置 导航 菜单 树 


SETnaviTree Dc Tavirees 


在 store/modules 下 新 建 一 个 user.js, 在 index.js 中 引入 , 里 面 保 存 加 载 后 的 用 户 权限 数据 。 


export default I 
state: I{ 
perms: []， // 用 户 权 限 标识 集合 
} ， 
getters: | 


} ， 


mutations: 1{ 


setPerms (state perms){ // 用 户 权 限 标识 集合 


state .perms = Perms; 


登录 页 面 


打开 登录 页 面 Login.vue， 在 登录 接口 设置 菜单 加 载 状态 ， 要 求 重新 登录 之 后 重新 加 载 菜 
单 ， 如 图 28-2 所 示 。 


图 28-2 


导 肌 守卫 


路 由 对 象 router 给 我 们 提供 了 beforeEach 方法 ， 可 以 在 每 识 路 由 之 前 进行 一 些 相 关 处 理 ， 
也 叫 导 航 和 守卫， 我们 这 里 了 驶 通过 导航 守卫 实现 动态 及 里 的 加 载 。 

修改 router/index.js 文件 ， 添 加 导航 守卫 ， 在 每 次 路 由 时 判断 用 户 会 话 是 否 过 期 。 如 果 登 
录 有 效 且 跳 转 的 是 登录 界面 ,就 了 且 接 路 由 到 主页 ; 如 果 是 非 登录 页 和 面 且 会 话 过 期 , 丈 跳 到 登录 
页 面 要 求 登录 ， 否 则 ， 加 载 动态 菜单 和 路 由 并 路 由 到 目标 页 面 。 
router.beforeEach{(({to, from, next) => 1 


// 登录 界面 登录 成 功 之 后 ， 会 把 用 户 信 息 保存 在 会 话 
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// 存在 时 间 为 会 话 生 命 周 期 ， 页 面 关闭 即 失效 
let userName = SeESSlLoOonStOTITaGe -GetILem( user"') 
if {to-path === "/Toginy L 
// 如 果 是 访问 登录 界面 ， 且 用 尸 会 话 信息 存在 ， 则 代表 已 登录 过 ， 跳 转 到 主页 
ift (userName) 1{ 
ET 
} else | 
next () 
} 
} else 1{ 
if (IuserName) 1{ 
// 如 果 访 问 非 登录 界面 ， 且 用 户 会 话 信息 不 存在 ， 则 代表 未 登录 ， 跳 转 到 登录 界面 
next ({ path: '/login" }) 
} else | 
// 加 载 动态 菜单 和 路 由 
addDynamicMenuAndRoutes (userName, to, from) 
next () 


} 


加 载 动 态 路 由 的 方法 内 容 如 下 。 冯 先 判 断 动态 灯 蛙 是否 已 经 存在 ,， 如果 存 在 就 不 再 午 复 加 
载 损耗 性 能 , 售 则 调用 后 台 接 口 加 载 数据 库 存储 沫 单数 据 , 加 载 成 功 之 后 通过 router.addRoutes 
方法 将 染 单 数据 动态 添加 到 路 由 器 并 同时 保存 祭 单数 据 及 加 载 状 态 以 备 后 用 .导航 沫 单 加 载 成 
功 之 后 ， 调 用 后 台 接 口 和 查找 用 尸 权 限 数 据 并 保存 起 来 ， 供 权限 判断 时 恋 取 。 


了 二 到 
* 加 载 动态 菜单 和 路 由 
< 
function addDynamicMenuAndRoutes (userName, to, from) | 
if (store.state.app.menuRouteLoaded) 1{ 
console.1og(' 动 态 染 单 和 路 由 已 经 人 存在. ) 
return 
} 
apli.menu.findNavIiree ({L UserName :userNamel}) 
-Tthent{(res => { 
// 添加 动态 路 由 
let dynamicRoutes = addDynamicRoutes (res.data) 
roOouLer.options.. routesl0|.children = 
router.options.routes[0l .children.concat (dynamicRoutes) 
router.addRoutes (router .options.routes) 
// 保存 加 载 状态 


store.commit ("menuRouteLoaded', true) 


// 保存 全 单 树 


260 


第 28 章 ”动态 加 载 菜单 


store.commit ("setNavIiree', res.data) 
}} .then(res => { 
api.user.findPermissions(1 name" :userNamel}} .then(res = 三 > 1 
// 保存 用 户 权限 标识 集合 
store.commit('setPerms', res.data) 


用 


} ) 
-Catch (function(res) 1{ 
}) 
} 
下 和 面 古 授 历 业 持 数 据 实际 创建 路 由 对 象 的 巡 辑 。 
/太太 


* 添加 动态 ( 沫 单 ) 路 由 
* Q@param {*} menuList 菜单 列表 
* @param {*} routes 递归 创建 的 动态 (菜单 ) 路 由 


oy 

function addDynamicRoutes (menuList = [|], routes = []) { 
var temp = [] 

for (var i = 0; i < menuList.length; i++) 1{ 


if (menuList[i|] .children && menuList[i| .children.length >= 1)} 1 
temp = temp.concat (menuList[1i|] .children) 
} else if (menuList[il.url && /MN\S/.test{(menuList[il .url}y 1 
menuList[il] .url = menuList[i] .url.replace(/^\//, "'') 
// 创建 路 由 配置 
var route = 1 
path: menuList[il] .url, component: null, name: menuList[il|] .name, 
meta: 1 icon: menuList[il.icon, index: menuList[il].id 1 
} 
try 1 
// 根据 沫 单 URL 动态 加 载 vue 组 件 ， 这 里 要 求 vue 组 件 须 按照 url 路 径 存储 
// 奉 url="sys/user"， 则 组 件 路 征 应 是 "@/views/sys/user.vue", 罕 则 组 件 加 载 不 到 
let array = menubList[il .url.split("/") 
Iielt on Lo 
torilet i=0 ji<arrav.length;s 1++) 1 
urli+=arrav[il] .substring(0,1) .toUpperCase () +array[i]l .substring (1}+"'/" 
} 
url = url.substring(0, url.length — 1) 
route['component'] = resolve => require([ @/views/${url} ], resolve) 
} catch (te} 1{} 


routes.push (route) 
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if (temp.length >= 1) | 


addDynamicRoutes (temp, routes) 


} 
return routes 
} 
4 Ey 
es ESNrm NT 
在 components 目录 下 新 建 一 个 导航 树 组件 MenuTree， 文 件 结构 如 图 28-3 所 示 。 
4 components 
by Hamburger 
by ThemePicker 
28-3 
MenuTree.vue 的 页 面 内 容 大 致 如 下 ， 主 要 是 遍历 菜单 数据 创建 导航 沫 单 。 
<template> 


<e1—submeng v1if="menu.children && menu.children.length >= 1" :index=™""" + 
menu.id"> 
<Ttemplate slot="title"»> 
<i :Class="meng.icon™ ></i> 
<span slot="title">{{menu.name} }</span> 
</template> 
<MenuTree wv-for=~"item in 
menu.children™" :key="item.id™ :menu="item"></MenuTree> 
</el-submenu> 
<el-menu-item v-else :index=""''" + menu.id" (click="handleRoute (menu) "> 
i Clase— "me LeoOn" >< i> 
<span slot="title">{{menu.name} }</span> 
</el-—-menu-item> 


</template> 


上 面 的 导航 菜单 项 都 绑 定 了 handleRoute 函数 ， 在 单 击 菜 单项 的 时 候 路 由 到 指定 路 径 。 
路 由 业务 功能 页 面目 前 还 没有 实现 ， 后 面 实现 业务 功能 页 面 时 会 讲 到 ， 如 图 28-4 所 示 。 


methods: { 
ED | 


.S$router.push("/™ + meny.url) 


28-4 
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在 头 部 区 域 HeadBar.vue 中 引入 导航 菜单 树 组 件 ， 并 编写 导航 菜单 区 域内 容 ， 其 中 的 菜单 
数据 navTree 是 在 导航 守卫 加 载 并 存储 到 store 的 ， 如 图 28-5 所 示 。 


class= Mer 


class=" logo” :style="{ background :themeColor 上 @click="$router.pusht 让 
Cl1ass= CO11apse> menyu-bar-coll: menu-bar-width 


sy Vv-if="collapse” src=" 和 /assets/logo.png ‘{{collapse?" " :appName ll: 


ref= navmenu” default-active= 1 ” :class="coOllapse? mer 


colle St :Collapse-transition= :unlique-opened= 


Bopen="handleopen™ @close="handleclose” @select="handleselect”" 


v-for=" item navTree” :key= ”item.id” :menu= "Item ”> 


28-5 


.了 ”页 面 测试 


启动 应 用 ， 访 问 http://localhost:8080/#/login， 登 录 进 入 主页 ， 导 航 菜单 己 经 显示 出 来 ， 如 
图 28-6 所 示 。 


Kitty Platform | 中 加 多 起 admin bt 


蕊 ”系统 管理 


4 服务 治理 


辕 ”接口 文档 


请” 代码 生成 


Es 使 用 案例 


28-6 
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页面 权 卫 控 制 


权限 控制 万 笋 


既然 是 后 台 权 限 官 理 系统 ， 当 然 少 不 了 权限 控制 。 至 于 权限 控制 , 前 闹 方 面 当然 束 古 指 对 
页 面 资源 的 芒 问 和 操作 控制 。 前 站 资源 权限 主要 分 为 两 个 部 分 , 即 村 航 玉 日 的 合 看 权限 和 页 面 
增 、 删 、 改 拘 作 按钮 的 操作 权限 。 

我 们 的 设计 把 页 和 面 导 航 汪 日 和 页 面 操作 按钮 统一 存储 在 灯 早 数据 库 表 中 ,六 早 表 中 包含 以 
下 权限 关注 点 。 


29.1.1 菜单 类 型 
菜单 类 型 代表 页 面 资源 的 类 型 。 


29.1.2 权限 标识 

权限 标识 是 对 页 面 资 源 进行 权限 控制 的 唯一 标识 ， 主 要 是 增 、 删 、 改 、 碍 的 权限 控制 。 权 
限 标识 主要 包含 四 种 ， 以 用 户 管 理 为 例 ， 权 限 标识 包括 sys:user:add (新 增 ) 、sys:user:edit〈 编 
得 ) 、sys:user:delete (删除 ) 、sys:user:view (查看 ) 。 


后 台 接 口 根据 用 户 权 限 加 载 用 户 菜 单数 据 返 回 给 前 端 ， 衣 端 导 航 菜 单 显示 用 户 菜 单 
注 高 数据 并 在 管理 页 面 根据 用 户 操作 权限 标识 设置 页 面 操作 按钮 的 可 见 性 或 可 用 状 
态 。 我 们 这 里 采用 无 操作 权限 则 页 面 操作 按钮 为 不 可 用 状态 的 方式 。 


29.1.3 ”菜单 表 结 构 
具体 的 并 里 表 结构 如 下 ,其 中 type 是 亲 早 类 型 ,url 是 菜单 URL,， perms 是 用 户 权 限 标识 。 


DROP TABLE IE EXISTS SYS menu ; 
CREATE TABLE sys menu ( 


“id” bigint (20) NOT NULL AUTO INCREMENT COMMENT ' 编 号 '， 

“name ”varchar (50) DEFAULT NULL COMMENT ' 菜 单 名 称 '， 

“parent id”bigint(20) DEFAULT NULL COMMENT ' 父 菜单 TD， 一 级 菜单 为 0'， 

“url” ”varchar (200) DEFAULT NULL COMMENT 菜单 URL, 类 型 ，1 .普通 页 面 (如 用 户 管 理 ， 
/sys/user) 2. 骨 套 完整 外 部 页 面 ， 以 http (s) 开头 的 链接 3. 骨 套 服务 器 页 面 ， 使 用 iframe :前 级 + 目 
标 URL (如 SoL 监控 ， iframe:/druid/login.html，iframe: 前 级 会 蔡 换 成 服务 器 地 址 ) '， 

“perms ” varchar(500) DEFAULT NULL COMMENT ' 授 权 ( 多 个 用 逗号 分 隔 ， 如 : 
ve SET a Svs er ei 

“type”int(11) DEFAULT NULL COMMENT ' 类 型 ”0; 目录 1: 菜单 2: 按钮 '， 

`icon”varchar (50) DEFAULT NULL COMMENT ' 菜 单 图 标 '， 

order num int(11) DEFAULT NULL COMMENT "FE 

“create by” varchar (50) DEFAULT NULI COMMENT ' 创 建 人 '， 

‘create time datetime DEFAULT NULL COMMENT ' 创 建 时 间 "， 

“last update by” varchar (50) DEFAULT NULL COMMENT ' 更 新 人 '， 

“last _ update time” datetime DEFAULT NULL COMMENT ' 更 新 时 间 '， 

“del flag” tinyint(4) DEFAULT '0' COMMENT ' 是 否 删 除 -1: 已 删除 0: 正常 '， 

PRIMARY KEY (“id') 

) ENGINE=InnoDB AUTO INCREMENT=45 DEFAULT CHARSET=utf8 COMMENT=' 菜 单 管理 '; 


导 册 菜单 实现 思路 


29.2.1 用 户 登 录 系统 
用 户 登 录 成 功 之 后 跳 转 到 站 页。 
29.2.2 ”根据 用 户 加 载 导 航 菜单 
在 路 由 导航 守卫 路 由 时 加 载 用 户 导航 菜单 并 存储 到 store。 加 载 过 程 如 下 ， 返 回 结果 
按钮 美 型 user 一 user role 一 role 一 role Imenu 一 Inenu。 
29.2.3 ”导航 栏 读 取 菜 单 树 
导航 栏 页 面 到 store 谈 取 导航 集 单 树 并 进行 展示 。 


页 面 按钮 实现 思路 


29.3.1 用 户 登 录 系 统 
用 户 登 录 成 功 之 后 跳 转 到 首页 。 
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29.3.2 ”加 载 权 限 标识 

在 路 由 导航 守卫 路 由 时 加 载 用 户 权 限 标 识 集 合并 保存 到 store 备用 。 加 载 过 程 如 下 ， 返 回 
结果 是 用 户 权 限 标 识 的 集合 : user 一 user role 一 role 一 role menu 一 menu。 
29.3.3 页面 按 钮 控制 


页 面 操作 按钮 提供 perms 属性 绑 定 权限 标识 ， 使 用 disable 属性 绑 定 权限 判断 方法 的 返回 
值 ， 权 限 判 断 方 法 hasPerms(perms) 通 过 得 找 上 一 步 傈 存 的 用 户 权 限 标识 集合 是 否 包含 perms 
来 包含 说 明 用 户 拥 有 此 相关 权限 ， 耕 则 设置 当前 操作 按钮 为 不 可 用 状态 。 


上 民国 
和 本 站 | 
| | ] | | | | | | 
| 有 | | 
FF A, PF | 
FF 本 | 1! | 
FF Fr | 
| PF | | 


29.4.1 导航 菜单 权限 


1. 加 载 导航 菜单 
在 导航 守卫 路 由 时 加 载 导航 菜单 并 保存 状态 ， 如 图 29-1 所 示 。 


router/index .js 


1 
api.menu.findNaviree({ userName :userName}) 


.then(res { 
dynamicRoutes = addDynamicRoutes(res.data) 
router.options.routes[8].children = router-options .routes[@] .children.co 
FouUter. 司 笠 9 RGUTtes (router ~ opti ns.Foutes ) 。 


store.commit( ' men 


store.commit(' setNavTree’, 


2. 页 面 组 件 引 用 
叶 航 栏 页 面 从 共 至 状态 中 读 取 导 航 沫 单 树 并 展示 ， 如 图 29-2 所 示 。 


vilews/NavBar/NavBar.vue 
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lor :themeColor} :class= Ct 


{{collapse? :appName 上 上 


="handleclose” Qseler 


Key=” tem。 关 d” : 几 enuU= ”ieml” 


图 29-3 


29.4.2 页面 按钮 权限 


1. 加 载 权 限 标 次 
打开 routerindex.js， 在 导航 守卫 路 由 时 加 载 权 限 标识 并 保存 状态 ， 如 图 29-4 所 示 。 
.then(res { 
dynamicRoutes = addDynamicRoutes(res.data) 
router.options.routes[8] .children = router.options.routes[8].children.concat 
router.addRoutes(router .options .routes); 


tore.commit( menuRouteLoaded 


store.commit(' setNav) 
}) .then(res f 


=] 


store.commit( setpPel ， res.data) 


图 29-4 


2. 权限 按钮 判断 
封 交 了 权限 操作 按钮 组 件 ， 在 组 件 中 根据 外 部 传 入 的 权限 标识 进行 权限 判断 。 


Views/Core/KtButton.vue 
<template> 
<]—button :size=" "size" :type="type” :icon="icon” :loading=" "loading™ 
:disabled="!hasPerms (perms)" Qclick="handleClick"> {{label}} 
</el—button> 
</template> 


<SCript>»> 
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import { hasPermission } from '@/permission/index.js' 
export default I 
name: "KtButton', 
props: 1{ 
label: { // 按钮 显示 文本 
Evpe: String: default: "Button’ 
} ， 
icon: { // 按钮 显示 图 标 
type: String, default: “"" 
} ， 
size: { // 按钮 尺寸 
type: String,: default: "mini" 
} ， 
type: { // 按钮 类 型 
tvpe: Stringr default: noll 
} ， 
loading: { // 按钮 加 载 标识 
type: Boolean, default: false 
} ， 
disabled: { // 按钮 是 否 禁 用 
tvpe: Booleanr, default: false 
js 
perms: { // 按钮 权限 标识 ， 外 部 使 用 者 传 入 
type: String: default: null 
} 
} ， 
methods: I 
handleClick: function () 1 
// 按钮 操作 处 理 函 数 
this.$emit("click, {}) 
} ， 
hasPerms: function (Permns) 1{ 
// 根据 权限 标识 和 外 部 指示 状态 进行 权限 判断 


return hasPermission(perms)}) & ‘Iithis.disabled 


} 


</script> 


3. 权限 判断 逻辑 


新 建 权限 文件 src/permission/index.js， 提 供 权 限 判 断 方法 hasPermission， 传 入 当前 组 件 绑 
定 的 权限 标识 perms， 判 断 权 限 标识 是 售 存 在 于 store 中 保存 的 有 用户 权限 标识 集合 中 。 
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src/permission/index.js 
import store from ‘'@/store' 
/大 克 
* 判断 用 户 是 否 拥有 操作 权限 
* 根据 传 入 的 权限 标识 ， 查 看 是 否 存在 用 户 权限 标识 集合 
* param perms 
*/ 
eXxport function hasPermission (perms) 1 
let hasPermission = false 
let permissions = store.state.user.perms 
for(let 1=0, len=~=permissijions.length; i<len; 1++) I 
if (permissions[i|] === perms) 1{ 
hasPermission = 七 YUE， 


break 


} 


return haspPpermission 


4. 权限 按钮 引用 


在 文件 views/Sys/User.vue 中 配置 相关 内 容 ， 新 建 一 个 用 户 宵 理 页 面 。 在 页 面 中 引入 权限 
按钮 组 件 并 绑 定 权限 标识 ， 如 图 29-5 所 示 。 


vilews/Sys/User.vue 


v-on:click="findPaget( ) "> 至 词 


type="primary” @click="handleAdd" 


: 外 部 使 
IE 国 表格 进行 了 二 次 封闭， 所 以 得 先 把 权限 标识 传 入 表格 ， 再 由 表格 传 入 权限 按钮 
permsEdit=" sys:user:edit” permsDelete="sys: 


:data="pageResyult” :columns="columns” 


efindPage=" findPage” @handleEdit=" handleEdit” @handleDelete=" "handleDelete” 


图 29-5 


在 文件 views/Core/ KtTable.vue 中 配置 相关 内 容 ， 添 加 一 个 表格 封装 组 件 ， 在 组 件 中 引入 
权限 按钮 组 件 ， 并 在 表格 操作 涉及 的 编辑 、 删 除 、 批 量 删 除 按钮 绑 定 对 应 的 权限 标识 ， 如 图 
29-6 所 示 。 
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vilews/Core/ Ktiable.vue 


:data="data.content” :highlight-current-ro 


rent-change= handleCurrentChange 


alipgn= Ce 


”min=width=" 


class=" toolbar™” style=" pi 
:label="$t( act 


disabled=" .Selections.length 


Bc] 


Lee = 者 mL 


BatchDelete & showOperati 


‘refreshpageReguest" 


‘total="data.totalSize” 


标签 页 功 BCE 
新 建 store/modules/tab.js 文件 ， 用 于 存储 标签 忠和 当前 选中 标签 选项 。 


store/modules/tab.js 
export default I 
state: 二 
// 主 入 口 标签 页 
mainTabs: [|], 
// 当前 标签 页 名 
mainTabsActiveName: 


} ， 


mutations: 1{ 


updateMainTabs (state 七 abs) { 
state.mainTabs = tabs 

} ， 

updateMainTabsActiveName (state, Pame) 1({ 


state.mainTabsActiveName = name 
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修改 views/MainContent.vue 文件 ， 企 主 内 容 区 域 上 面 添 加 标签 页 组 件 , 通过 Element 的 选 
卡 el-tabs 组 件 实现 ， 能 够 通过 切换 标签 页 查看 不 同 路 由 页 面 ， 并 需要 支持 导航 菜单 和 标签 


项 
页 同步 ， 如 图 29-7 所 示 。 


Class=" tt | 
i ee jositic 


二 Class="$store.state.app.collaps 
v-model="mainTabsActiveName” :closable=" " type=" card 

Btab-click="selectedTabHandle™ tab-remove=" remo bHandle™ 
Class= tabs-tools’ rr 七 PEEer= 


style=" class=" el]-ico 


herHandle” ;关闭 其 它 标 和 
oseAllHandle 六 本 全 部 标 认 
: rrentHandle"> 书 | 麻 和 当 前 标签 


和 fors=s 
"item. title ee 
{{item.title 


we ry pr 9 = | 
1 起 优 册 ;站 总 册 全 a. | 


— 四 
:Class= 可 二 | - 工 屏 个 和” 


图 29-7 

监 到 路 由 变化 的 时 低调 用 handleRoute 方法 
是 否 存在 ， 不 存在 则 创建 ，@ 如 果 是 新 他 

加 同步 标签 页 路 由 到 导航 菜单 ， 设 置 选中 


通过 watch 实现 对 路 由 对 象 $route 的 监听 ， 
进行 处 理 ， 处理 这些 主要 包 拓 3 项 : (DD ya 和 
建 了 标 合 页 ， 吏 把 新 标 登 页 加 入 当前 标 釜 


watch: { 
sroute: "handleRoute' 
} ， 
methods: I 
// 路 由 操作 处 理 
handleRoute (route) 1 
// tab 标签 页 选中 ， 如 果 不 存 在 束 先 添加 


this.mainTabs.filterl(item => item.name 


var tab = == 二 route.name) |0| 
if (!Itab) I 
Le | 
name: route.name, 
title: route.name, 
icon: Ioute.meta.icon 


} 
this.mainTabs = this.mainTabs.concat (tab) 


} 
this.mainTabsActijveName = tab.name 
// 切换 标签 页 时 同步 更 新 高 党 菜 单 


if(this.$srefs.navmenu != null) { 
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一 TT + route.meta.index 


this.s$refs.navmenu.activeIndex 


this.srefs.navmenu.initoOpenedMenu () 


上 一 步 将 标签 页 存储 到 了 store， 这 里 mainTabs 从 store 中 获取 标签 页 数据 提供 给 页 面 。 


computed: 1 
mainTabs: 1 
get () { return this.sstore.state.tab.mainTabs }, 


{ this.s$store.commit('updateMainTabs', wal) } 


set (val) 
上 ， 


mainTabsActijveName: I 
get () { return this.s$store.state.tab.mainTabsActiveName 1}, 


set (val) { this.s$store.commit ('updateMainTabsActiveName', val) } 


标签 页 对 应 的 操作 孙 数 包括 标签 页 的 选中 、 关 闭 等 系列 操作 。 


/1/ tabs， 选 中 tab 
selectedTabHandle (tab) [| 


this.mainTabs.filter(item => item.name === tab.name) 


tab = 
i (tab. length >= 1) 1 
this.s$router.push({ name: tab[0] .name }) 


} 
}, 
/i tabs, 删除 tab 


removeTabHandle (tabName) I 


this.mainTabs.filter(item 三 > item.name 1!== tabName) 


this.mainTabs = 
if (this.mainTabs.length >= 1) | 
// 当前 选中 tab 被 删除 
ift (tabName === this.mainTabsActiveName) ({ 
this.srouter.push({ name: this.mainTabs[this.mainTabs.length -1] .name }, 
Co 


this.mainTabsActiveName = this.s$route.name 


}) 
} 


} else I 
His STrOULeEr Bushili"/") 
} 


}, 
// tabs， 关 闭 当 前 
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tabsCloseCurrentHandle () 1 
this.removeTabHandle (this.mainTabsActiveName) 
} ， 
// tabs， 关 闭 其 他 
tabsCloseOtherHandle () { 
this.mainTabs = this.mainTabs.filter(item => item.name === 
this.mainTabsActiveName) 
}， 
// tabs， 关 闭 全 部 
tabsCloseAllHandle () 1{ 
this.mainTabs = [] 
his Srouter pusn(l"/") 
}， 
// tabs， 刷 新 当前 
tabsRefreshCurrentHandle () 1 
Var tempTabName = this.mainTabsActjveName 
this.removeTabHandle (tempTabName) 
this.s$nextTick(() => 1 
this.srouter.push({ name: tempTabName }) 


}) 


系统 介绍 页 


为 方便 标签 页 效果 的 测试 ， 这 里 添加 一 个 系统 介绍 页 ， 作为 系统 的 首页 。 
新 建 views/Intro/Intro.vue 文件 结构 ， 和 于 加 系统 介绍 页 面 ， 附 上 介绍 信息 ， 如 几 29-8 所 示 。 


vilews/Intro/Intro.vue 


基于 Spring Boot、Spring Cloud、Vue、Element 的 Java EE 快速 开发 平台 
旨 在 提供 一 套 简洁 易 用 的 解决 方案 ， 帮 助 用 户 有 效 降 低 项 目 开发 难度 和 成 本 
博客 提供 项 目 开发 过 程 同 步 系 看 教程 浆 章 ， 手 把 手 的 教 你 如 何 开 发 同类 系统 


1 三 | ] - js | ] LY 总 三 


功能 计划 


条 纪 登录 ;系统 用 殉 登 录 认 万 
上 用 户 管 
宙 权 管理 ， 新 建 机 构 ， 修 改 机 构 ， 删 除 机 构 ， 查 询 机 构 
ee 删除 角色 ， 查 询 角 色 
- 新 奸 信 了 履 汪 单 ， 删 际 荣 蛙 ， 查询 杀 音 


图 29-8 
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在 router/index.]s 中 添加 系统 介绍 页 的 路 由 。 router/index.]s 内 容 如 图 29-9 所 示 。 


component: Intro, 
meta: 1 
1Con: 


1ndex: 8 


29-9 


页 面 测试 


司 动 应 用 ， 访 问 http:Wlocalhost:8080/ 吉 login， 登 录 后 进入 主页 ， 默 认 显 示 系 统 介 绍 页 ， 如 


图 29-10 所 示 。 
Kitty Platform wx 相 二 回国 人， 


ap 


项 目 介 绍 


基于 Spring Boot. Spring Choud. Vue. Elemen 


音 在 捍 世 一 套 简 沾 旺 用 的 饰 求 方 裤 . 帮助 用 户 有 : 


三 


29-10 


打开 导航 来 单 “ 系 统管 理 ” 一 “用 户 和 党 理 ”， 可 以 看 到 打开 的 标签 页 和 用 户 管理 界面 ， 如 
图 29-11 所 示 。 
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Kitty Platform 


miangae1 mangolBgdq com 18588982323 


mangoz 技术 mango2 吕 9 Com 18588982323 


mangod mango3Bgq. Com 196589982423 
mmangcd 技术 mmango 炸 加 四 中 com 18588982323 
mangos manggs9. com 96880982423 
mangos 法 本 特 mangobegd com 10680982323 


mangor 坟 mango7 民 qq com 188880823423 


卉 
日 EE 时 量 全 成 
医 = 


mangos mangosegdg. com 13583982423 


共 色 条 1 2 3 
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我 们 测试 一 下 权限 控 钮 ， 修 改 用 户 官 理 界 和 面 的 新 增 控 钮 的 权限 标识 ， 把 它 从 有 效 的 
“sys:user:add” 改 为 无 效 的 “sys:user:add2”。 
views/Sys/user.vue 内 容 如 图 29-12 所 示 。 


v-model="filters .mamE” pl aceholder= ”有 


29-12 


退出 系统 重新 登录 ， 再 次 打开 用 户 管理 界 面 ， 发 现 因 为 用 户 缺 少 权 限 ， “新 增 ” 按 钮 已 变 
为 不 可 用 状态 〈 见 图 29-13) ， 这 样 就 实现 了 页 面 按钮 的 权限 控制 。 


二 系统 介绍 


mangol 市 场 i mangol@agg.com 18688982323 


mange2 术 部 mangoz@qg.com 18688982323 


mango3 li mango3@qg.com 18688982323 


mangod 直言 mangodBqgq.com 18648982323 


图 29-13 
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第 30 章 
功 彝 官 奸 椒 块 


就 目前 来 看 ， 功 能 管理 页 面 大 多 类 似 ， 如 用 户 管理 、 功 能 管理 模块 中 的 字典 管理 、 系 统 配 
置 、 登 录 日 志和 操作 日 专 等 都 是 以 表格 管理 数据 为 主 , 机 构 害 理 和 羔 早 官 理 则 以 表格 树 的 数据 
管理 为 主 ， 所 以 这 里 在 每 个 类 型 中 挑选 一 个 作为 讲解 案例 ， 其 他 页 面 不 再 复述 , 读者 用 到 的 时 
候 碍 疯 相 关 代 码 即 可 。 


rn ph 在 所 
子 典 管理 
上 一 章 我 们 已 经 实现 了 用 户 和 党 理 模 块 , 功能 管理 模块 中 的 字典 管理 、 系 统 配置 、 登 录 日 忘 、 
和 操作 日 总 等 功能 模块 都 是 类 似 用 户 管 理 模 块 的 功能 ， 以 表格 展示 数据 为 主 , 旦 登录 日 志和 操 
作 日 志 只 提供 可 读 、 不 提供 编辑 和 删除 功能 。 
接 下 来 ,我 们 以 字典 管理 为 例 再 次 讲解 一 下 表格 功能 模 氛 的 实现 ,其 他 模块 束 不 再 警 述 了 。 
30.1.1 关键 代码 
参照 用 户 管理 界面 ， 在 views/Sys 下 这 加 字段 管理 页 面 组 件 ， 逐 步 添加 页 面 内 容 。 
(1) 添加 工具 栏 内 容 。 


\ 


Views/Sys/Dict.vue 
<!-- 工 具 栏 --> 
<div class="toolbar”™ 
style="float:left;padding-top:10px;padding—left:1opx;"> 
erm mn Er = me Tileers -Slane Sha > 
< lform item> 
«<1 input wmodel="1Tiliers.1abel™ placeholder=" 名 称 "></el-input> 
</el—-form-item> 
<]—form-— item> 
<kt—button icon="fa fa—search™ :label="S$t{("'action.search"}™" 
perms="sys:dict:view™ type="primary™ @click="findPage (null)})"/> 
</el—form item> 
过 个 form item> 
<kt—button icon="fa fa-plus™ :label="$t ("action.add'})}™ 
perms="svys:dict:add"™ type="primary™ Qclick="handleAdd™ /> 
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</el-—-form-item> 
</el-—-form> 


</div> 
(2) 添加 展示 表格 kt-table 组 件 。 


views/Sys/Dict.vue 
<1-- 表 格 内 容 栏 --> 
-ki Lable permsEdit— svesdict:edil permsDeletle— svedict:delele. 
:data="pageResult™ :columns="columns"™ 
QfindPage="findPage™” @handleEdit="handleEdit™ 
QhandleDelete="handleDelete"> 
</kt-—table> 
(3) 编辑 对 话 框 。 
Views/Sys/Dict.vue 
<!-- 新 增 编 辑 界面 --> 
<el-dialog :title="operation?' 新 增 ':' 编 辑 '" 
width="40$%" :visible.sync=" "editDialogVisible”" :close—on—click-modal="false"> 
<el1l—form :model="dataForm” label—width="80px™” :Iules="dataFormRules™ 
ref="dataForm” :Sl1Ze="S1Ze"> 
< 忆 Cl-form-item label="ID™" prop="id"” w-if="false"> 
<e1—input vmodel="dataForm.id"” :disabled="true™ 
auto-complete="off"></el-input> 
</el—form item> 
<e]-form item label" 名 称 " prop="label™> 
<el—input vmodel="dataForm.label™ 
auto—complete="off"></el—input> 
</el—form item> 
<el Form item label=" 慎 " prop="Vvalue"> 
<el—-input v-model="dataForm.value™ 
auto—complete="off"></el—-input> 
</el—form-—item> 
el Porm item Japel="=R 人 Tro "EVEe"> 
< 人 -Input v-model="dataForm.type”™ 
auto-Comp1lLete="off"><Ael1-input> 
</el-form-item> 
<el-form-item label=" 排 序 " prop="sort"> 
<el1l—input v-model="dataForm.sort™ 
auto—complete="off"></el—input> 
</el—form item> 
<el]-form item label=" 描 述 " Prop=" descriptjon" > 
<e1l—input vmodel="dataForm.description™ auto—complete="off™"™ 
tvpe="textarea"™></el—input> 
</el—form item> 


<el-form-item label=" 备 注 " prop="remarks"> 
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<el1—input vmodel="dataForm.remarks™” auto—complete="off" 
type="textarea"></el-input> 
</el—form item> 
</el-form> 
< slot="footer™” class=" dialog—footer"> 
<el-button :size="size" fliclick.native="editDialogVisible = 
false™>|I1Stl action- cancelylil</el button> 
< 忆 l—button :size=" size” type= primary™ 
@click.native="submitForm™” :loading="editLoading"™>{{$t ("action.submit"'})}}</el— 
button> 
</div> 


</el—-dialog> 


(4) 编 与 分 页 得 萄 方法 。 


Views/Sys/Dict.vue 
// 获取 分 页 数据 
findPage: function (data) { 
ifidata == null}) { 
this.pageRequest = data.pageRequest 
) 
this.pageRequest.params = |[{name: "label’', wvalue:this.filters.l1labell}l] 
this.s$api.dict.findPage (this.pageRequest) .then((res) => { 
this.pageResult = res.data 
}} .then(datal=null?data.callback:"") 


(5) 编 与 批量 删除 方法 。 
views/Sys/Dict.vue 
// 批量 删除 
handleDelete: function (data) 1{ 
this.s$api.dict.batchDelete (data.params) .then (data!l=null?data.callback:"'") 
} 


(6) 顷 辑 所 区 方法 。 


Views/Sys/Dict.vue 
submitForm: function () { 
this.$refs.dataForm.validate((valid) => I 
if (valid) I 
this.$confirm(' 确 认 提 交 吗 ?'，' 提 示 '，{}) .then(() => 1 
this.editLoading = true 
let params = Object.assijignt({}, this.dataForm) 


this.sapi.dict.save (params) .then{((res) => I 


ifires.code == 200) { 
this.smessage({ message: ' 操 作成 功 a 
EvBe- SueGeess |) 
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} else 1 
this.smessage ({message: :操作 失败 ，' + 


res.msg, type: "'error"}) 


this.editLoading = false 
this.s$refs['dataForm'|] .resetFields'() 
this.editDialogVvisible = false 
this.findPage (null} 
7) 
a, 


}) 


30.1.2 ”页 面 稚 图 
字典 管理 页 面 如 图 30-1 所 示 。 


亨 哇 时间 
由 站 BO 0-52.54 
了 0 全 [23 19.53:17 


共 z 订 


图 30-1 


了 .2 角色 管理 


如 作 


1 前 性 1 页 


角色 管理 页 面 除了 表格 展示 之 外 , 还 可 以 给 角色 赋予 角色 采 蛙 。 接 下 来 , 我 们 束 讲 解 一 下 


角色 官 理 页 面 的 实现 。 


30.2.1 关键 代码 


首先 在 views/Sys 下 新 建 角 色 管 理 页 面 ， 然 后 模仿 用 户 管 理 加 入 表格 组 件 ， 再 在 角色 表格 


下 面 添加 一 个 角色 蘑 单 树 ， 为 用 己 分 配角 色 沫 单 。 角 色 染 单 树 组 件 如 下 : 


219 


Spring Boot+Spring Cloud+Vue+Element 项 目 实 战 : 手把手 教 你 开发 权限 管理 系统 


Views/Sys/Role.vue 
<1-- 角 色 菜 单 ， 表 格 树 内 容 栏 --> 
<div class="menu—container” :Vv-if="true"> 
<div Class=" menuyu—header"> 
<span><B> 角 色 菜 单 授权 </B></span> 
</div> 
<el-tree :data="menuData™ size="mini™” show—checkbox 
node—kev="1id"” :props=" defaultProps™ 
style="width: 100%;pading—top:20px;”" 
ref=" "menuTree” :render—content=" renderContent™ 
Vv—-loading="menuLoading™" element-loading-text=" 拼 命 加载 中 
heck Strieelvw rue. 
Gcheck-change="handleMenuCheckChange"™"> 
</el-—tree> 
<d1iv 
style="float: left;padding— left:24px;padding— top:12px;padding—bottom: 4px;"> 
<el—checkbox v-model="checkAll™ 
@change="handleCheckAll™” :disabled=—"this.selectRole.id == null"><b> 全 选 
</bp></el-—-checkbox> 
</div> 
<d1iv 
style="float:right;padding—-right:1lopx;padding—top: 4px;padding—bottom: 4px; > 
<kt—button :label="s$t('action.reset'}™ perms—"sys:role:edit™ 
type="primary™” f@click="resetSselection™ 
:disabled="this.selectRole.id =—— null™/> 
<kt—button :label="$st("'action.submit'}™ perms~—="sys:role:edit™ 
type="primary™” Qclick="submitAuthForm™" 
:disabled="this.selectRole.id == null™ :loading="authLoading™"/> 
</div> 


</div> 

然后 针对 选中 的 角色 同步 更 新 菜单 树 的 勾 选项 以 及 进行 菜单 树 本 身 节点 选中 时 对 应 父子 
关系 的 同步 选中 状态 变更 。 
Views/Sys/Role.vue 


// 角色 选择 改变 监听 


handleRoleSelectcChange (val) I 


ift(tval == null || wal.val == mall I 
return 

} 

this.selectRole = wal.val 


this.sapi.role.findRoleMenus ({'rolelId':val.val.id}) .then( (res) => 1{ 
this.currentRoleMenus = res.data 
this.s$refs.menuTree.setCheckedNodes (res.data) 

}) 

} ， 
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// 树 节点 选择 监听 
handleMenuCheckChange (data, check, subCheck} { 
if (check) 1{ 
// 节 扩 选中 时 同步 选中 父 节 扣 
let parentlId = data.parentId 
this.srefs.menuTree.setChecked (parentId, true, false) 
} else 1{ 
// 市 太 取 消 选 中 时 同步 取消 选中 子 节点 
ifidata.children != null} 1 
data.children.forEach (element => { 
this.srefs.menuTree.setcCchecked (element.id, false, 


false) 


30.2.2 ”页面 稚 图 
角色 管理 页 面 如 图 30-2 所 示 。 


创建 时 间 
admin 超 虎 管 理 周 201%W1719 T1141:11 
mnyg 项 目 号 至 201 生 全 让: 和 

天 点 信 员 2010 710 11-11:11 
测 和 于 人 后 20191719 11-11:11 


共 4 体 
角色 菜单 授权 

图 系统 管理 目录 顶级 荣 单 
图 服务 治理 EE 印 项 级 某 单 

持 口 广 档 顶级 菜单 httpsr127.0.0.1:8001/swagger-ui.html 

系统 监控 目录 项 级 证 单 
图 代码 生成 顶级 菜单 站 Bneraiorgenerator 
图 在 绪 用 户 E>: [i 顶级 菜单 'sysionline 
图 使 用 案例 目录 区 顶级 茉 单 


全 选 


30.2 


荣 单 管理 


末 蛙 官 理 页 和 面 主 要 是 放 兽 一 个 表格 树 组 件 ， 可 以 支持 表格 树 的 新 增 、 编 辑 和 有 删除。 机构 泡 
理 页 面 与 此 类 似 ， 所 以 这 里 以 沫 单 管理 为 例 进行 讲解 。 
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在 Core 目录 下 添加 一 个 TableTreeColumn 封装 组 件 ， 作 为 表格 中 可 展开 的 列 。 


30.3.1 表格 列 组 件 


views/Core/TableTreeColumn.vue 


<template> 


<el-table-column :prop="prop” Vv-bind="sattrs"> 
Lemilate slot seope— SCOpPe > 


<span @click.prevent="toggleHandle (scope.s$index, 


SCOPSE.IOW)}™ :style="childstvyles (scope.row}) > 


<i :Class="iconClasses (scope.row)"™ :style="iconStyles (scope .TOW) "></i> 
{{ scope.row[lprop] 上 
</span> 
</template> 


</el-table—column> 


</template> 


<ScCript> 


import isArray from ‘lodash/isArray' 
expPort default { 
name: '"'table-tree~-column', 
props: { // 省 略 props }， 
methods: I{ 
childSsStyles (row) | 
return { ‘padding—left': (rowlthis.levelKey| * 25) + "px |} 
} ， 
lconClasses (row) I 
Teturn | lrow. expanded ? el] Tecon caret Tright =: el icon carelt bottom, | 
} ， 
ljconstyles (row) | 
return { ‘visilbility': this.hasChild(row) ? ‘visible" : hidden'" |} 
} ， 
haschild (row)} 1 
return(isArray (row[lthis.childRey|] ) &&trow[this.childKey| .length>=1) ||false 
} ， 
// 切换 处 理 
toggleHandle {index, row) I 
1 (this.hasChild{(row})} 1{ 
var data = this.sparent.store.states.data.slice (0) 
datalindex|]. expanded = ldatalindex|]. expanded 
if (datal[lindex|]. expanded)} 1{ 
data=data.splicel(l0, indext+l} .concat (row[lthis.childRevy|}) -concat (data) 
} else | 
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data = this.removeChildNode (data, rowlthis.treeKeyl]|) 
} 
this.sparent.store.commit ('setData', data) 
this.snextTick(() => { this.sparent.doLayout () }) 
} 
} ， 
// 移 除 子 节 点 
removeChildNode (aqata， ParentId) 1 
var parentlIds = isArray (parentId) >? parentld : [ParentId | 
if (parentId.length <= 0) { return data } 
var lids = | 
for (var i = 0; i < data.length; I++h { 
if (parentIds.indexOf (datal[lil| [this.parentKey|) !== 一 
&& ParentIds .Inadexot (datal[lil] [this.treeRKey|]) === 1) | 
ids.push{data.splicel(i, 1)}10|] [this.treeRey|) 


了】 一 一 


} 


return this.removeChildNode (data, jids) 


< scrint> 


30.3.2 创建 表格 树 


在 Sys 目录 下 新 建 菜单 管理 页 面 加 入 工具 栏 、 编 辑 对 话 框 与 其 他 功能 类 型 ， 主 要 是 在 页 


面 放 置 表 格 树 组 件 ， 放 置 一 个 el-table， 针 对 name 列 使 用 我 们 封装 的 TableTreeColumn 组 件 显 
示 子 树 的 展示 。 


Views/Sys/Menu.vue 


<1-- 表 格 树 内 容 栏 --> 
<el—table :data="tableTreeDdata” stripe SSLZze= minl style="width: 100%;" 
v-loading="loading”" element—loading-—text="$t('action.loading')} "> 
<l-—table—column 
prop="id™ header—aligqgn="center"” aliqgn=" center” width=—="80" label="ID"> 
</el-table—-column> 
<table-tree—-column 
prop="name” header—aliqn=" center" treeKey="1d"” width="150" Tamel me 
</table-—tree—-column> 
<el-table—column header-align="center"” align-"center"” label-" 图 标 "> 
-temlate slot scope— scCopne > 
<i :Class="scope.row.icon || "></i> 


</template> 
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</el-table—column> 


// 省 略 其 他 列 声明 


</el—table> 


30.3.3 ”页 面向 图 
末 早 官 理 页 面 如 图 30-3 所 示 。 


* 用 户 管 理 


* 霜 移 管理 


* 祭 色 管理 


k 菜单 管理 


k 字 旦 管理 


bk 至 续 配 于 


* 登录 日 志 


+* 摊 作 日 志 


Isyeluser 


isysidept 


Isysirole 


isysimenu 


1sysdict 


i'sys/config 


isysioginlog 


IsY3ilog 


引 关 加 ss 

时 辆 中 

荡 因 于 因 和 于 
< 


9 
中 顺 上 岂 


日 
= 
路 


= 
唐 


莽 蝇 
员 刻 


* 服务 治理 


* 接口 又 梢 hitp-ir 127.0.0.1-8001r... 


30-3 
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第 31 章 
其 屋外 部 网 内 


有 些 时 候 ， 我 们 需要 内 骸 外 部 网 页 ， 可 以 通过 早 击 于 航 洒 日 ,然后 将 我 们 的 主 内 容 柱 加 载 
外 部 网 页 的 内 容 进行 显示 ， 如 合 看 服务 端 所 供 的 SQL 监控 页 面 、 接 口 文档 页 面 等 。 

这 时 吏 要 求 我 们 的 寻 航 玉 单 能 够 解析 外 部 众 套 网 页 的 URL, 并 根据 URL 路 由 到 相应 的 诅 
僚 组 件 。 接 下 来 我 们 讲解 具体 实现 方 柔 。 


实现 原理 


(1) 给 亲 早 URL 添加 外 部 舱 套 网 页 格式 ， 除 内 部 这 人 染 的 页 面 URL 外 ， 外 部 网 页 统一 下 
接 以 http[s] 完 整 路 径 开 头 。 

(2) 足 由 导航 守卫 在 动态 加 载 路 由 时 ， 检 测 到 如 果 是 外 部 散 套 网 页 ， 就 绑 定 到 IFrame 
锯 伺 组件， 最 后 使 用 IFrame 组 件 来 演 染 般 苦 页面 。 

(3) 某 单 单 击 跳 转 的 时 候 ， 根 据 路 由 类 型 生成 不 同 的 路 由 路 径 ， 载 入 特定 的 页 面 内 容 演 
染 到 步 又 (2) 绑 定 的 特定 组 件 上 。 


代码 实现 
前 面 的 原理 听 起 来 似乎 有 点 笼统 ， 我 们 来 看 看 具体 的 实现 过 程 。 


31.3.1 确定 菜单 URL 

服务 监控 页 和 面 ， 其 实 显 示 的 就 是 服务 监控 提供 的 现 有 页 面 。 访问 地 址 是 
http://localhost:8001/druid/login.html， 即 完整 HTTP 地 址 格式 。 效 果 如 图 31-1 所 示 ， 输 入 服务 
端 配 置 的 账号 、 密 码 就 可 以 查看 了 。 


Spring Boot+Spring Cloud+Vue+Element 项 目 实战 : 手把手 教 你 开发 权限 管理 系统 


账号 信息 是 “用 户 名 :admin” “密码 ，admin” 


localhost:8001/druid/login.html 


3 
Sign in Reset 


图 31-1 
登录 之 后 , 可 以 看 到 各 种 数据 库 相 关 的 监控 记录 ， 是 数据 库 监 控 和 调 优 的 利器 ， 如 图 31-2 
所 示 。 


Jruid Monitor 首页 阔 握 源 SQL 监控 SQL 防火 墙 Web 应 用 URI 鉴 控 Session 监 挤 spring 监 控 


Eng 吗 h | 申 文 


SQL Stat View JSON API Rigid 5 ， 


3 据 行 时 间 分 页 执行 +RS 时 分 布 
saQLv 数 行 数列 -] [- -] 


update W2000000 02000000 [0.0.0.0.00] 
Sys_ won iog .. 
salect u* (salect [让 站 让 站 让 人 心 全 [让 站 站 看 看 站 的 | 
dd .Ain .. 


我 们 将 SQL 监控 的 菜单 URL 配置 为 http://127.0.0.1:8001/druid/login.html，localhost 跟 
127.0.0.1 是 一 个 意思 ， 代 表 本 机 ， 届 时 路 由 解析 时 检 出 到 以 http 开 尖 的 就 是 外 部 网 页 ， 人 然后 
绑 定 到 IFrame 骨 侠 页面 组 件 上 进行 泻 染 ， 如 图 31-3 所 示 。 


Wi 
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在 views 下 创建 IFrame 目录 并 在 其 下 新 建 一 个 IFrame.vue 髓 人 套 组 件 。 
IFrame 组 件 在 泻 染 时 ， 读 取 store 的 过 ameUrl 以 加 载 要 演 染 的 内 容 〈 通 过 设置 src) 。 


views/IFrame/IFrame.vue 
<template> 
<div class="iframe—container> 
<lframe :Src="SsIC” SCIOl1ling="auto™” frameborder="0" 
class="frame™”" :onload="onloaded()"> 
</iframe> 
</div> 


</template> 


<SCcCript>»> 
export default I 
datal() { 
return { src: "yy loading: null } 
} ， 
methods: I 
TESetSsrc: function (url) 1 
this.src = url 
this.load () 
} 
Joad: functiont(} { 
this.loading = this.s$loadingt(t{ 
Jock: true, text: "Joading.-.. s,s Spinner’: "el icon—loading" yp 
background: "rabat(0, 0U 0U 0.5})"™, 
target: document.quervSelector("#main container ™) 
}) 
} ， 


onloaded: function() I 
if (this.loading} 1{ this.loading.close(})} |} 
| 
} ， 
mounteqd() f 
this.resetSrc{(this.$store.state.iframe.iframeUril); 
} ， 
watch: { 
sroute: If 
handler: function({val, oldval)} I 
// 如 果 是 跳 转 到 柑 套 页 面 ， 切 换 jframe 的 url 


this.resetsrcl(this.$store.state.iframe.iframeUrl); 
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} 


</script> 
// 此 处 省 略 Css 


31.3.3， 绑 定 庶 套 组 件 


在 导航 守卫 动态 加 载 路 由 的 时 候 ， 和 解析 URL， 如 果 是 租 套 页 面 ， 就 绑 定 到 IFrame 组 件 。 
router/index.js 的 相关 内 容 如 图 31-4 所 示 。 


route = 1{ 
path: menuList[il].url, 
component : 
name : [i] .mame， 
meta: 1{ 
: menulList[i].icon, 
index: menuList[i].id 


path = getIFramePath(menuList[i] .url) 


if (pathy) { 


route[ path ] = path 
moute[ component "es0lve require([ /views 
url = getIFrameUrl(menuList[i] .url) 
iFrameUrl = 《path :path, "url :url} 
store.commit('"'addIFrameUrl", iFrameUrl) 
} else { 


31-4 


在 每 次 路 由 时 ， 把 路 由 路 径 保存 到 store， 如 果 是 IFrame 嵌 套 页 面 ，IFrame 就 会 在 泻 染 时 
到 store 中 读 取 iframeUrl 以 确定 演 染 的 内 容 。 


roOUteTr/ inadeX-]js 


/* 
* 处 理 IFrame 几 套 页 面 
2 
function handlelFrameUrl (path)} I 
// 峰 套 页 面 ， 保存 iframeUrl 到 store， 供 IFrame 组 件 读 取 展示 
Jet url = path 
let length = store.state.iframe.iframeUrls.length 
fortlet i=0; i<length; i++) { 


let iframe = store.state.iframe.iframeUrls[il] 
if (path {I= null && path.endsWith (jframe.path))} { 


url = iframe .url 


store.commit ("setIFrameUrl', url) 
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break 


在 sotre/modules 下 新 建 过 ame.js 文件 ， 存 储 IFrame 状态 。 


sotre/modules/iframe.js 
export default I 
state: 1 
iframeUrl: []， // 当前 艇 套 页 面 路 由 路 径 
iframeUrls: []  // 所 有 网 套 页 面 路 由 路 径 访 问 URL 
上 
getters: | 
上 
mutations: 1 
setIFrameUrlistate, iframeUrl}l // 设 是 iframeUrl 
state.1iframeUrl = ifirameUrl 
} 
addIFrameUrl(state, iframeUrl}{ // iframeUrls 


state.1iframeUrls.push (iframeUrl) 


} ， 


actions: I 


} 


iframe.js 古 一 个 工具 类 ， 主 要 对 髓 套 URL 进行 处 理 。 


utils/iframe .js 

A* 坟 

* 般 套 页 面 IFrame 模块 
二 


import { baseUrl } from '@/utils/global' 


A* 坟 
* 钳 套 页 面 URL 地 址 
* @param {*} url 
*/ 
export function getIFramePath (url)} 1{ 
let iframeUrl = "" 
if(/^iframe:.*/.test (url)) f{ 
iframeUrl = url.replace('iframe:"', "''") 


} else if({/^*http[ls]?3:%\/AN/-*/ test{(url}yy 1{ 
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En ele IEE 7 
if (iframeUrl.indexOf (™:"}) ‘= 1) I 


iframeUrl = iframeUrl .substring(iframeUrl.lastindexOf(™":") + 1) 


} 


return iframeUrl 


WE 
* 般 套 页 面 路 由 路 径 
* Bparam {*} url 
ey 
export function getIFrameUrl (url) 1{ 
let 1frameUrl = "" 
if(/^*iframe:.*/.test (url)}))y f{ 
iframeUrl = baseUrl + url.replace('iframe:', "'') 
} else if(/^http[s]?3:\/\/.*/ .test (url)}) { 
iframeUrl = url 
} 


return iframeUrl 


31.3.4 ”菜单 路 由 跳 转 


在 菜单 路 由 跳 转 的 时 候 ， 判 断 是 否 是 IFrame 路 由 ， 如 果 是 就 处 理 成 IFrame 需要 的 路 由 
URL 进行 跳 转 。 


components/MenuTree/index.vue 
handleRoute (menu) I 
// 如 果 是 内 套 页 面 ， 转 换 成 iframe 的 path 
let path = oqetIFramePath (menu.url) 
if('Iipath)} 1{ 
path = menu.url 
} 
// 通过 菜单 URL 跳 转 至 指定 路 由 


this.$router.push("/™ + path) 


a 
ms Li 
i 加 r 
莉 .i | 四 三， 
四 人 
“I | Wy 古 | 


局 动 注册 中 心 、 监 控 服 务 、 后 台 服 务 ， 访 问 http:/Wlocalhost:8080， 登 录 主 页 
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单 击 导航 栏 “ 系 统 监控 ”一 “数据 监控 ”， 可 以 看 到 在 主 内 容 区 域 加载 了 数据 监控 页 面 


内 容 。 


如 果 页 面 显 示 拒 绝 加 载 ， 查 看 控制 台 是 否 是 因为 X-Frame-Options 的 设置 。 因 为 


注 


Spring Security 默认 是 不 允许 页 面 被 误 套 的 ， 所 以 X-Frame-Options 被 默认 设置 为 
DENY ,这 个 可 以 在 后 人 台 WebSecurityConfig 配 置 类 通过 http.headers(.frameOptions(. 
disable()。 


一 
局 


茶 用 X-Frame-Options 设置 束 可 以 正常 显 示 了 ， 如 图 31-5 所 示 。 


人 GG © localhost8080/#/8001/druid/login.html 


Mango Platform 中 加 % SD 局 超 管 2 
合 ， 系统 管理 

4 服务 治理 

接口 立 档 Login 


用 户 名 
入 ”未 统 监控 


证 | 


| EE Sm = me 
© sea ee 


图 31-5 
同 理 ， 实 现 其 他 骸 套 页 面 ， 服 务 监控 页 面 如 图 31-6 所 示 。 
Mango Platform | | 立 粒 博客 
二， 系统 管理 局 窗 系统 介绍 惰 数据 监控 二 服务 监 控 xx 


个 服务 治理 本 Spring Boot Admin 


接口 又 档 
APPLICATIONS INSTANCES STATUS 


@ sses 7 1 1 all up 


服务 监控 


A mango-admin 


二 代 | Sm http:WGG20JI1G2E.logon.ds.ge.com:80017 


图 31-6 
接口 文档 页 面 如 图 31-7 所 示 。 
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Mango Platform ||| 


(swagger 


basic-error-controller sasicError controller > 
operation-handler operation Handler 
sys-config-controller sys config Controller 


sys-dept-controller sys DeptController 


31:7 
注册 中 心 页 面 如 图 31-8 所 示 。 
Mango Platform 
各 ” 系 统管 理 ~ 重 系统 介绍 人 @ 数据 监控 他 服务 监控 @@ 注册 中 心 > 


注册 中 心 Services 


gea rch by name 


| All (7) | BD Passing (6) A Warning (0) 图 Critical (1) 
| 一 | 


erVice Naode Health 


consul 1 


mango-admin secure=false 


mango-backup 1 secure=false 


31-8 


了 


第 32 章 
式 据 香 仍 次 息 


需求 育 景 
在 很 多 时 候 , 我 们 需要 对 系统 数据 进行 备份 还 原 。 当 然 , 生产 线 上 专业 的 备份 还 原 会 由 专 
门 的 工作 人 员 如 DBA 在 数据 库 服务 端 直接 进行 备份 还 原 。 我 们 这 里 主要 是 通过 界面 进行 少量 
的 数据 备份 和 还 原 ， 比 如 做 一 个 在 线 演示 系统 , 为 了 方便 恢复 被 演示 用 户 删除 或 修改 过 的 演示 
数据 , 我 们 这 里 就 实现 了 这 么 一 个 系统 数据 备份 和 还 原 的 功能 , 正好 可 以 给 大 家 作为 示例 进行 
讲解 。 我 们 通过 代码 调用 MySQL 的 备份 还 原 命令 实现 系统 备份 还 原 的 功能 ， 具 体 逻 辑 都 是 由 
后 台 代码 实现 的 ， 参 见 数据 备份 还 原 后 端 实现 篇 。 


后 台 接 口 


在 前 期 我 们 已 经 准备 好 了 系统 备份 还 原 的 后 台 接 口 ， 上 具体 可 以 参考 备份 还 原 后 人 台 篇 。 
备份 还 原 主要 接口 有 以 下 几 个 。 

e backup: 备份 创建 接口 ， 会 在 服务 端 backup 目录 下 生成 以 时 间 戳 相关 的 备份 目录 ， 目 
录 下 有 MySQIL 的 备份 SQL 。 

delete: 系统 备份 删除 接口 ， 传 入 页 面 得 询 得 到 的 备份 名 称 作 为 参数 ， 删 除 服 务 亲 备份 
e findRecord: 系统 备份 查询 接口 ， 得 草 所 有 备份 记录 ， 退 回 给 前 人 台 页 面 展 示 ， 用 于 还 原 
和 删除 。 

restore: 系统 备份 还 原 接口 ,， 传 入 页 和 面 会 询 得 到 的 备份 名 称 作 为 参数 ， 还原 系统 数据 到 
当前 备份 。 

可 以 访问 备份 服务 的 Swagger 得 看 接口 文档 ， 如 图 32-1 所 示 。 
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my-sql-backup-controller My sq Backup Controller Y 


EE /backup/backup backup ] 


/backup/delete deleteBackupRecord 


/backup/findRecords findBackupRecords 


:backup/restore restore 


32-1 


i i i 
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F 1 了 人 了 
a 有 了 | | | 
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在 views 目录 下 新 建 Backup 目录 和 页 面 。 页 面 内 容 主要 是 一 个 可 以 进行 备份 和 还 原 的 对 
话 框 组 件 。 


1. 模板 内 容 


Views/Backup/Backup .vue 
<template> 
<!-- 备 份 还 原 界面 --> 
<el—-dialog :title="$t ("common.backupRestore')™ 
width="40$%"™" :visible.sync=" "backupVisible”" :close—-on—click-modal="false™ :modal 
=false> 
<el-table :data="tableData™ style="width: 100%;font— -sjze:1]6px;" 

height="330px” :show-header="showHeader™ 

Size="Mmini™ 
v-loading="tableLoading™” :element-tableLoading-—text="$t ('action.loading')}™"> 

<el1l-table-column prop="title™” :label="$t('common.versionName’')™" 
header—align="center” align="center"> 

</el-table-column> 

<el1l—table—-column fixed—"right™ :label=—"$t ("action.operation™)™ 
width="180"> 

<Lemplate slot— scope—" "SCoOpe”"> 
<el1-button Qclick="handleRestore (scope.row)™ type="primary™" 
size="mini"™>{{Sst('common.restore’'}}}</el-—button> 
<el-button Qclick="handleDelete (scope.row)™" 

tvype="danger™” :disabled="scope.row.name=='backup' ?2true:false"™ 
size="mini™>{{st{("action.delete'}}il</el— button> 


</template> 
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</el-table-column> 
</el-table> 
<Span Slot="footer™” class="dialog——footer" > 
<el-—button size="small™ Qclick="backupVisible = 
false">{{$t('action.cancel')}}}</el-button> 
<el-—button size="small™ type=" "primary™ 
Qclick="handleBackup">{{$t ('common.backup') }}</el-button> 
</span> 
</el-dialog> 
</template> 


针对 备份 查询 、 备份 创建 、 备份 还 原 和 备份 删除 的 方法 如 下 , 因为 备份 还 原 服务 比较 简单 ， 
这 里 束 没 有 对 axios 进行 封装 了 ， 和 直接 调用 axios 方法 即 可 。 


2. 备份 查询 


Views/BacKkKup/Backup .Vvue 
findRecords: function () 1 
this.tableLoading = 七 TU 
axios.get (this.baseUrl + '/backup/findRecords') .then{( (res) => 1{ 
eS Teesdalea 
if(ires.code == 200 1 
this.tableData = res.data 
| else 1 
this.smessage({message: :操作 和 失败， es mo Ev crror ly 
} 
this.tableLoading = false 
Hn 


3. 备份 创建 


Views/Backup/Backup .vue 
handleBackup: function () 1 
this.tableLoading = true 
axios.get (this.baseUrl + '/backup/backup') .then( (res) => 1{ 
Fes res aes 
if(res.code == 200) I 
this.smessage({ message: ' 操 作成 功 '， type: "success”' 用 
} else 1{ 
this. $message ({message: "可 作 失败， " 了 res.msg, tvpe: "error"}) 
} 
this.tableLoading = false 
this.findRecords ()} 
}) 
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4. 备份 还 原 


Views/Backup/Backup .vue 
handleRestore: function (data) I 
this.tableLoading = true 
axios.get (this.baseUrl + '/backup/restore', {params : {name : 
data.name }}) .then((res}) => I 
res = res.data 
if (res.code == 200) | 
this.smessage({ message: ' 操 作成 功 '， type: "success" 上 
this.S$emit('afterRestore'', {1}) 
1} else 1 
this.smessage({message: :操作 和 失败， ”二 res.msg, type: ‘error"}) 
} 
this.tableLoading = false 


}) 


5. 备份 删除 


views/Backup/Backup .vue 
handleDelete: function (data) 1{ 
this.tableLoading = true 
axios.get (this.baseUr]l + '/backup/delete', {params : {name : 


data.name 1}}) .then{((res) => I 


res = TeESs.data 
if(res.code == 200) | 

this.smessage({ message: ' 操 作成 功 '， vee "SueCcess | 
} else 1 


this.s$message ({message: ' 操 作 失 败 ，' + res.msg, type: 'error'}) 
} 
this.findRecords () 
this.tableLoading = false 


}) 


贝 面 引 用 


我 们 之 前 在 用 户 和 面板 预 留 了 备份 还 原 的 操作 入 口 ， 在 用 户 面 板 中 引入 备份 还 原 组 件 。 
views/Core/PersonalPanel.vue 相关 内 容 如 图 32-2 所 示 。 
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图 32-2 


在 备份 还 原 操 作 中 添加 啊 应 图 数 ， 打 开 备 份 还 怕 界 面 。views/Core/PersonalPanelvue 相关 
内 容 如 图 32-3 所 示 。 


"showBackupDialop™ 


图 32-3 
啊 应 函数 ， 打 开 备 份 还 原 界 面 : 


Views/Core/PersonalPanel .vue 
// 打开 备份 还 原 界面 
showBackupDialog: function() | 


this.s$srefs.backupDialog.setBackupVisible (true) 


还 原 书 


作 啊 应 函数 ， 还 原 成 功 之 后 清除 用 己 信 息 并 返回 到 登录 页 面 。 


Views/Core/PersonalPanel .vue 

// 成 功 还 原 之 后 ， 重 新 登录 

afterRestore: function{() 1{ 
this.srefs.backupDialog.setBackupvVvisible (false) 
SeEsslionSstorage.removelteml(" USeI ) 
this.$router.push("/login™) 
this.$api.login.logout() .then((res) => { 

})} .catch (function (res) [| 


}) 
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本 2 .5 页 面 测试 


局 动 注册 中 心 、 监 控 服 务 、 后 台 服 务 、 备 份 服务 ， 访 问 http:/localhost:8080， 登 录 应 用 进 
入 主页 ， 单 击 “ 用 户 和 面板 ”一 “备份 还 原 ”， 弹 出 备份 还 原 界 面 。 


1. 备份 查询 
可 以 看 到 初始 状态 系统 会 为 我 们 创建 一 个 初始 备份 , 即 系统 默认 备份 , 且 系 统 默认 备份 不 
可 删除 ， 防 止 所 有 备份 被 删除 时 无 备份 可 用 ， 如 图 32-4 所 示 。 


全 2018/8714 11:11:11 
ln@@qq .com followers watches friend 


tqq.com 和 个 人 中 心 au 收 改 宕 码 


t@qq.com 


池 清除 缓存 
t@qq.com 


曲 在 污 作 数 1 
tqg.com 


x、 息 访问 次 数 10 
i@qq com | 品 备 份 还 原 


em 路 退出 登录 


图 32-4 


2. 备份 创建 


单 击 “备份 ”按钮 ， 进 行 数据 备份 ， 如 图 32-5 所 示 ， 系 统 创 建 了 一 个 新 的 备份 。 备 份 名 
称 格 式 为 “backup_+ 时 间 戳 ”， 对 应 SQL 文件 存储 目 隶 名称。 


3. 备份 删除 
单 击 “ 删 除 ” 按 钮 ， 如 图 32-6 所 示 ， 备 份 被 成 功 删 除 。 
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系统 默认 备份 还 原 超 管 - 超级 管理 员 


backup 2019-01-22 175702 


人 201 和 是 4 11:11:11 
followers Watches fnend 


和 个 人 中 心 和 修改 审 合 


汪 清除 缓存 
年 在 线 人 数 1 
息 访问 次 数 10 


已 备份 还 原 


全 退出 登录 


ssNA 和 从 Ea 和 -超员 
© 2018/8/14 11:11:11 


iin@@qq.com followers watches friends 


tqgq.com 看 个 人 人 中心) au 修改 审 码 
tg9.com 

地 清除 组 存 
tgg-com 


曲 在 线 人 数 1 
tg9-com 


a 站 访问 次 数 10 


1@qq.com 习 备份 还 原 


rd 路 退出 登录 


4. 备份 还 原 


接 下 来 我 们 测试 一 下 数据 还 原 功能 ， 选 择 “ 系 统管 理 ” 一 “机 构 管理 ”， 删 除 轻 侍 集团 和 
牧 侍 集团 的 两 株 机 构 树 ， 只 剩 下 三 国 集团 ， 如 图 32-7 所 示 。 
单 击 “ 用 户 面 板 ” 一 “备份 还 原 ” 一 “还 原 ” 按 钮 ， 进 行 数据 还 原 ， 如 图 32-8 所 示 。 


过 
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提示 


0 Wmans? 


于 32-7 


他 时 
系统 默认 备份 
2018/9/2: 


色 32-8 


还 原 成 功 之 后 ， 会 回 到 登录 页 面 ， 重 新 登录 ， 碍 看 机 构 官 理 ， 必 现 数据 已 经 恢复 回来 了 ， 
如 图 32-9 所 示 。 


请 系统 介绍 


创建 时 间 
20180/23 19 
3522 
2018/W23 19 
35-55 


20180/23 19 
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